@ardium-ui/ui 5.0.0-alpha.24 → 5.0.0-alpha.26

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 (48) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +410 -401
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/lib/_internal/item-storages/dropdown-item-storage.d.ts +13 -14
  4. package/lib/_internal/item-storages/simple-item-storage.d.ts +15 -12
  5. package/lib/_internal/item-storages/simplest-item-storage.d.ts +1 -1
  6. package/lib/_internal/selectable-list-component.d.ts +2 -3
  7. package/lib/checkbox-list/checkbox-list.component.d.ts +2 -3
  8. package/lib/inputs/autocomplete-input/autocomplete-input.component.d.ts +2 -2
  9. package/lib/select/select.component.d.ts +8 -8
  10. package/lib/select/select.directive.d.ts +6 -0
  11. package/lib/select/select.module.d.ts +1 -1
  12. package/lib/select/select.types.d.ts +4 -2
  13. package/lib/types/item-storage.types.d.ts +15 -17
  14. package/package.json +1 -1
  15. package/prebuilt-themes/default/buttons/button.css.map +1 -1
  16. package/prebuilt-themes/default/buttons/fab.css.map +1 -1
  17. package/prebuilt-themes/default/buttons/icon-button.css.map +1 -1
  18. package/prebuilt-themes/default/calendar.css.map +1 -1
  19. package/prebuilt-themes/default/card.css.map +1 -1
  20. package/prebuilt-themes/default/chips.css.map +1 -1
  21. package/prebuilt-themes/default/core.css +1 -0
  22. package/prebuilt-themes/default/core.css.map +1 -1
  23. package/prebuilt-themes/default/dropdown-panel.css.map +1 -1
  24. package/prebuilt-themes/default/form-field-frame.css.map +1 -1
  25. package/prebuilt-themes/default/form-field.css.map +1 -1
  26. package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
  27. package/prebuilt-themes/default/inputs/color-input.css.map +1 -1
  28. package/prebuilt-themes/default/inputs/digit-input.css.map +1 -1
  29. package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
  30. package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
  31. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  32. package/prebuilt-themes/default/inputs/search-bar.css.map +1 -1
  33. package/prebuilt-themes/default/modal.css.map +1 -1
  34. package/prebuilt-themes/default/progress-circle.css.map +1 -1
  35. package/prebuilt-themes/default/segment.css +70 -57
  36. package/prebuilt-themes/default/segment.css.map +1 -1
  37. package/prebuilt-themes/default/select.css +11 -4
  38. package/prebuilt-themes/default/select.css.map +1 -1
  39. package/prebuilt-themes/default/slide-toggle.css.map +1 -1
  40. package/prebuilt-themes/default/slider.css +88 -49
  41. package/prebuilt-themes/default/slider.css.map +1 -1
  42. package/prebuilt-themes/default/stars.css.map +1 -1
  43. package/prebuilt-themes/default/table.css.map +1 -1
  44. package/themes/_variables.scss +1 -0
  45. package/themes/default/core.scss +1 -0
  46. package/themes/default/segment.scss +75 -67
  47. package/themes/default/select.scss +14 -4
  48. package/themes/default/slider.scss +88 -53
package/themes/default/slider.scss CHANGED
@@ -3,23 +3,58 @@
3
3
  @use 'sass:math';
4
4
  @use '../variables' as ARD;
5
5
 
6
+ :root {
7
+ --ard-slider-font-size: var(--ard-form-field-font-size, 1rem);
8
+ --ard-slider-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
9
+ --ard-slider-width: 100%;
10
+ --ard-slider-padding: 0 calc(var(--ard-slider-handle-size, 1.25em) / 2);
11
+ --ard-slider-track-height: 0.25em;
12
+ --ard-slider-track-color: var(--ard-cmpcl--bg-colored);
13
+ --ard-slider-track-opacity: 20%;
14
+ --ard-slider-track-border-radius: 9999px;
15
+ --ard-slider-active-track-height: calc(100% + 0.125em);
16
+ --ard-slider-active-color: var(--ard-cmpcl--bg-colored);
17
+ --ard-slider-active-track-opacity: 100%;
18
+ --ard-slider-value-tick-size: 0.125em;
19
+ --ard-slider-value-tick-opacity: 30%;
20
+ --ard-slider-track-hitbox-size: calc(var(--ard-slider-handle-size, 1.25em) / 2);
21
+ --ard-slider-handle-size: 1.25em;
22
+ --ard-slider-handle-bg: var(--ard-cmpcl--bg-colored);
23
+ --ard-slider-handle-border: none;
24
+ --ard-slider-handle-border-radius: 9999px;
25
+ --ard-slider-handle-hitbox-size: 0.375em;
26
+ --ard-slider-handle-overlay-size: 0.5em;
27
+ --ard-slider-handle-overlay-hover-opacity: 7.5%;
28
+ --ard-slider-handle-overlay-focus-opacity: 15%;
29
+ --ard-slider-handle-overlay-active-opacity: 25%;
30
+ --ard-slider-label-font-size: 0.875rem;
31
+ --ard-slider-label-padding-top: 0.2em;
32
+ --ard-slider-label-bg: #{ARD.$text3};
33
+ --ard-slider-label-color: #{ARD.$text2-alt};
34
+ --ard-slider-label-height: 2em;
35
+ --ard-slider-label-border: none;
36
+ --ard-slider-label-border-radius: 0.375em;
37
+ --ard-slider-label-padding: 0 0.75em;
38
+ --ard-slider-label-font-weight: 500;
39
+ --ard-slider-label-arrow-size: 0.375em;
40
+ --ard-slider-label-offset: 0.5em;
41
+ }
42
+
6
43
  .ard-slider-container-master,
7
44
  .ard-range-slider-container-master {
8
45
  @include coloringMixins.typeColors();
9
46
 
10
47
  position: relative;
11
- font-size: 1rem;
12
- width: 20em;
48
+ font-size: var(--ard-slider-font-size, var(--ard-form-field-font-size, 1rem));
49
+ width: var(--ard-slider-width, 100%);
13
50
  max-width: 100%;
14
- padding: 0 0.625em;
51
+ padding: var(--ard-slider-padding, 0 calc(var(--ard-slider-handle-size, 1.25em) / 2));
15
52
  display: flex;
16
53
  flex-direction: column;
17
54
 
18
- color: var(--ard-cmpcl--bg-colored);
19
-
20
55
  //! compact
21
56
  &.ard-compact {
22
- font-size: 0.85rem;
57
+ font-size: var(--ard-slider-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
23
58
 
24
59
  .ard-slider-container > .ard-slider-handle {
25
60
  font-size: 0.95em;
@@ -32,50 +67,50 @@
32
67
  align-items: center;
33
68
  position: relative;
34
69
  width: 100%;
35
- height: 1.25em;
70
+ height: var(--ard-slider-handle-size, 1.25em);
36
71
  cursor: pointer;
37
72
  }
38
73
  //! track
39
74
  .ard-slider-track {
40
75
  width: 100%;
41
- height: 0.25em;
76
+ height: var(--ard-slider-track-height, 0.25em);
42
77
  background: ARD.$bg;
43
78
 
44
79
  .ard-slider-track-overlay {
45
80
  position: absolute;
46
81
  width: 100%;
47
82
  height: 100%;
48
- background: currentColor;
49
- opacity: 20%;
50
- border-radius: 9999px;
83
+ background: var(--ard-slider-track-color, var(--ard-cmpcl--bg-colored));
84
+ opacity: var(--ard-slider-track-opacity, 20%);
85
+ border-radius: var(--ard-slider-track-border-radius, 9999px);
51
86
 
52
87
  &.ard-slider-track-active {
53
88
  width: 0;
54
- height: calc(100% + 0.125em);
55
- top: math.div(-1em, 16);
56
- opacity: 100%;
57
- transition:
58
- width var(--_ard-slider-transition) ease,
59
- left var(--_ard-slider-transition) ease;
89
+ height: var(--ard-slider-active-track-height, calc(100% + 0.125em));
90
+ top: 50%;
91
+ transform: translateY(-50%);
92
+ background: var(--ard-slider-active-color, var(--ard-cmpcl--bg-colored));
93
+ opacity: var(--ard-slider-active-track-opacity, 100%);
94
+ transition: width var(--_ard-slider-transition) ease, left var(--_ard-slider-transition) ease;
60
95
  }
61
96
  }
62
97
  .ard-hitbox {
63
98
  position: absolute;
64
- inset: -0.625em;
99
+ inset: calc(var(--ard-slider-hitbox-size, calc(var(--ard-slider-handle-size, 1.25em) / 2)) * -1);
65
100
  }
66
101
  .ard-value-tick-container {
67
102
  position: absolute;
68
- left: 0.125em;
69
- width: calc(100% - 0.25em);
103
+ left: var(--ard-slider-value-tick-size, 0.125em);
104
+ width: calc(100% - var(--ard-slider-value-tick-size, 0.125em) * 2);
70
105
  height: 100%;
71
106
  }
72
107
  .ard-value-tick {
73
108
  top: 50%;
74
- width: 0.125em;
75
- height: 0.125em;
109
+ width: var(--ard-slider-value-tick-size, 0.125em);
110
+ height: var(--ard-slider-value-tick-size, 0.125em);
76
111
  border-radius: 9999px;
77
112
  background: ARD.$text;
78
- opacity: 30%;
113
+ opacity: var(--ard-slider-value-tick-opacity, 30%);
79
114
  transform: translate(-50%, -50%);
80
115
  }
81
116
  }
@@ -87,19 +122,17 @@
87
122
  .ard-slider-handle {
88
123
  font-size: inherit;
89
124
  top: 0;
90
- width: 1.25em;
91
- height: 1.25em;
125
+ width: var(--ard-slider-handle-size, 1.25em);
126
+ height: var(--ard-slider-handle-size, 1.25em);
92
127
  color: inherit;
93
- background: currentColor;
94
- border-radius: 9999px;
95
- border: none;
128
+ background: var(--ard-slider-handle-bg, var(--ard-cmpcl--bg-colored));
129
+ border-radius: var(--ard-slider-handle-border-radius, 9999px);
130
+ border: var(--ard-slider-handle-border, none);
96
131
  z-index: 1;
97
132
  outline: none;
98
133
  cursor: pointer;
99
134
 
100
- transition:
101
- box-shadow 0.15s ease,
102
- left var(--_ard-slider-transition) ease;
135
+ transition: box-shadow 0.15s ease, left var(--_ard-slider-transition) ease;
103
136
  box-shadow: ARD.$simple-shadow;
104
137
 
105
138
  // cursor: grab;
@@ -108,39 +141,40 @@
108
141
  // }
109
142
 
110
143
  .ard-focus-overlay {
111
- @include defaultMixins.focus-overlay(0.5em);
144
+ @include defaultMixins.focus-overlay(var(--ard-slider-handle-overlay-size, 0.5em));
112
145
  background: currentColor;
113
146
  }
114
147
  @include defaultMixins.focus-overlay-scale-addon();
115
148
 
116
149
  .ard-hitbox {
117
150
  position: absolute;
118
- inset: math.div(-7em, 16);
119
- border-radius: 9999px;
151
+ inset: calc(var(--ard-slider-handle-hitbox-size, 0.375em) * -1);
152
+ border-radius: calc(var(--ard-slider-handle-border-radius, 9999px) + var(--ard-slider-handle-hitbox-size, 0.375em));
120
153
  }
121
154
  &:hover {
122
155
  .ard-focus-overlay {
123
- opacity: 7.5%;
156
+ opacity: var(--ard-slider-handle-overlay-hover-opacity, 7.5%);
124
157
  }
125
158
  }
126
159
  &:focus {
127
160
  box-shadow: ARD.$simple-shadow2;
161
+
128
162
  .ard-focus-overlay {
129
- opacity: 15%;
163
+ opacity: var(--ard-slider-handle-overlay-focus-opacity, 15%);
130
164
  }
131
165
  }
132
166
  &:active,
133
167
  &.ard-grabbed {
134
168
  .ard-focus-overlay {
135
- opacity: 25%;
169
+ opacity: var(--ard-slider-handle-overlay-active-opacity, 25%);
136
170
  }
137
171
  }
138
172
  }
139
173
  .ard-slider-label-container {
140
174
  position: relative;
141
- font-size: 0.9em;
142
- padding-top: 0.2em;
143
- left: 2px;
175
+ font-size: var(--ard-slider-label-font-size, 0.9em);
176
+ padding-top: var(--ard-slider-label-padding-top, 0.2em);
177
+ left: 0.125em;
144
178
  width: calc(100% - 0.25em) !important;
145
179
 
146
180
  .ard-slider-label {
@@ -153,16 +187,15 @@
153
187
  z-index: 2;
154
188
  }
155
189
  .ard-slider-tooltip {
156
- --ard-background: #{ARD.$text3};
157
- background: var(--ard-background);
158
- color: ARD.$text2-alt;
159
- font-size: 0.875em;
160
- border-radius: 0.375em;
161
- height: 2em;
162
- padding: 0 0.75em;
190
+ background: var(--ard-slider-label-bg, #{ARD.$text3});
191
+ color: var(--ard-slider-label-color, #{ARD.$text2-alt});
192
+ font-size: var(--ard-slider-label-font-size, 0.875rem);
193
+ border-radius: var(--ard-slider-label-border-radius, 0.375em);
194
+ height: var(--ard-slider-label-height, 2em);
195
+ padding: var(--ard-slider-label-padding, 0 0.75em);
163
196
  display: flex;
164
197
  align-items: center;
165
- font-weight: 500;
198
+ font-weight: var(--ard-slider-label-font-weight, 500);
166
199
  position: relative;
167
200
  z-index: 2;
168
201
  user-select: none;
@@ -173,28 +206,30 @@
173
206
  &::before {
174
207
  content: '';
175
208
  position: absolute;
176
- border: 0.375em solid transparent;
209
+ border: var(--ard-slider-label-arrow-size, 0.375em) solid transparent;
177
210
  left: 50%;
178
211
  }
179
212
  }
180
213
  &.ard-tooltip-top {
181
214
  .ard-slider-tooltip {
182
- bottom: 0.5em;
215
+ bottom: var(--ard-slider-label-offset, 0.5em);
216
+ transform-origin: center bottom;
183
217
 
184
218
  &::before {
185
219
  bottom: 0;
186
- border-top-color: var(--ard-background);
220
+ border-top-color: var(--ard-slider-label-bg);
187
221
  transform: translate(-50%, 100%);
188
222
  }
189
223
  }
190
224
  }
191
225
  &.ard-tooltip-bottom {
192
226
  .ard-slider-tooltip {
193
- top: 0.5em;
227
+ top: var(--ard-slider-label-offset, 0.5em);
228
+ transform-origin: center top;
194
229
 
195
230
  &::before {
196
231
  top: 0;
197
- border-bottom-color: var(--ard-background);
232
+ border-bottom-color: var(--ard-slider-label-bg);
198
233
  transform: translate(-50%, -100%);
199
234
  }
200
235
  }