@ardium-ui/ui 5.0.0-alpha.67 → 5.0.0-alpha.69

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 (27) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +84 -58
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/lib/inputs/input-utils.d.ts +8 -3
  4. package/lib/inputs/number-input/number-input.component.d.ts +3 -1
  5. package/lib/inputs/number-input/number-input.defaults.d.ts +2 -0
  6. package/lib/inputs/number-input/number-input.types.d.ts +6 -0
  7. package/lib/inputs/password-input/password-input.component.d.ts +1 -0
  8. package/package.json +1 -1
  9. package/prebuilt-themes/default/inputs/autocomplete-input.css +2 -4
  10. package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
  11. package/prebuilt-themes/default/inputs/date-input.css +12 -5
  12. package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
  13. package/prebuilt-themes/default/inputs/file-input.css +4 -4
  14. package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
  15. package/prebuilt-themes/default/inputs/hex-input.css +5 -6
  16. package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
  17. package/prebuilt-themes/default/inputs/input.css +2 -4
  18. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  19. package/prebuilt-themes/default/inputs/number-input.css +41 -20
  20. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  21. package/prebuilt-themes/default/inputs/password-input.css +2 -4
  22. package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
  23. package/themes/default/inputs/_shared.scss +2 -4
  24. package/themes/default/inputs/date-input.scss +8 -1
  25. package/themes/default/inputs/file-input.scss +2 -0
  26. package/themes/default/inputs/hex-input.scss +3 -2
  27. package/themes/default/inputs/number-input.scss +43 -18
package/themes/default/inputs/number-input.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  // --ard-number-input-color: ;
25
25
  // --ard-number-input-placeholder-color: ;
26
26
  --ard-number-input-placeholder-opacity: 60%;
27
-
27
+ --ard-number-input-disabled-opacity: 50%;
28
28
  // --ard-number-input-width: ;
29
29
  --ard-number-input-rounded-border-radius: 8px;
30
30
  }
@@ -59,19 +59,44 @@ ard-number-input {
59
59
  gap: 0;
60
60
  width: 100%;
61
61
 
62
- .ard-input-container {
62
+ .ard-number-input-wrapper {
63
+ flex-grow: 1;
64
+ text-size-adjust: 100%;
65
+ display: flex;
66
+ align-items: center;
63
67
  height: 100%;
64
- max-width: 100%;
65
- padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem)); // TODO
66
-
67
- & > input {
68
- width: 100%;
68
+ }
69
+ .ard-input-container {
70
+ position: relative;
71
+ padding-left: var(--ard-number-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
72
+ padding-right: var(--ard-number-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
73
+ padding-top: var(--ard-number-input-padding-top, var(--ard-form-field-padding-top, 0));
74
+ padding-bottom: var(--ard-number-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
75
+
76
+ input {
77
+ padding-left: var(--ard-number-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
78
+ padding-right: var(--ard-number-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
79
+ padding-top: var(--ard-number-input-padding-top, var(--ard-form-field-padding-top, 0));
80
+ padding-bottom: var(--ard-number-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
69
81
  }
70
82
  }
71
- .ard-placeholder {
72
- padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
83
+
84
+ //! prefix & suffix
85
+ .ard-number-input-prefix-container,
86
+ .ard-number-input-suffix-container {
87
+ height: max-content;
88
+ max-height: 100%;
89
+ display: flex;
90
+ align-items: center;
91
+ }
92
+ .ard-number-input-prefix-container {
93
+ padding-left: var(--ard-number-input-padding-left, 0.375rem);
94
+ }
95
+ .ard-number-input-suffix-container {
96
+ padding-right: var(--ard-number-input-padding-right, 0.375rem);
73
97
  }
74
98
 
99
+ //! buttons
75
100
  .ard-quick-change-button {
76
101
  position: relative;
77
102
  min-width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
@@ -112,7 +137,7 @@ ard-number-input {
112
137
  border-radius: var(--ard-number-input-rounded-border-radius, 8px);
113
138
 
114
139
  &.ard-quick-change-false {
115
- .ard-input-container {
140
+ .ard-number-input-wrapper {
116
141
  border-radius: var(--ard-number-input-rounded-border-radius, 8px);
117
142
  }
118
143
  }
@@ -131,7 +156,7 @@ ard-number-input {
131
156
  }
132
157
 
133
158
  &.ard-quick-change-false {
134
- .ard-input-container {
159
+ .ard-number-input-wrapper {
135
160
  border-radius: 9999px;
136
161
  }
137
162
  }
@@ -140,7 +165,7 @@ ard-number-input {
140
165
  //! variant-specific appearances
141
166
  &.ard-variant-rounded,
142
167
  &.ard-variant-sharp {
143
- &:not(.ard-appearance-filled) .ard-input-container {
168
+ &:not(.ard-appearance-filled) .ard-number-input-wrapper {
144
169
  box-sizing: border-box;
145
170
  background: var(--ard-appearance-background);
146
171
  border: var(--ard-appearance-border);
@@ -157,11 +182,11 @@ ard-number-input {
157
182
 
158
183
  //! compact
159
184
  &.ard-compact {
160
- .ard-input-container {
161
- padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
162
- }
163
- .ard-placeholder {
164
- padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
185
+ .ard-number-input-wrapper {
186
+ padding-left: var(--ard-number-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem));
187
+ padding-right: var(--ard-number-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem));
188
+ padding-top: var(--ard-number-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0));
189
+ padding-bottom: var(--ard-number-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0));
165
190
  }
166
191
  .ard-quick-change-button {
167
192
  min-width: var(--ard-number-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
@@ -172,7 +197,7 @@ ard-number-input {
172
197
  .ard-disabled {
173
198
  > .ard-number-input {
174
199
  pointer-events: none;
175
- opacity: 50%;
200
+ opacity: var(--ard-number-input-disabled-opacity, 50%);
176
201
 
177
202
  .ard-button .ard-focus-overlay {
178
203
  opacity: 0;