mithril-materialized 3.17.1 → 3.17.3

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 (12) hide show
  1. package/dist/core.css +10 -5
  2. package/dist/forms.css +10 -5
  3. package/dist/index.css +10 -5
  4. package/dist/index.esm.js +4 -2
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/index.js +4 -2
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.min.css +1 -1
  9. package/dist/index.umd.js +4 -2
  10. package/dist/index.umd.js.map +1 -1
  11. package/package.json +1 -1
  12. package/sass/components/forms/_input-fields.scss +11 -6
package/dist/core.css CHANGED
@@ -2411,6 +2411,8 @@ textarea.materialize-textarea::-ms-input-placeholder {
2411
2411
 
2412
2412
  .input-field input.number-input:not(.browser-default) {
2413
2413
  -moz-appearance: textfield;
2414
+ box-sizing: border-box;
2415
+ width: calc(100% - 0.75rem);
2414
2416
  padding-right: 2rem;
2415
2417
  }
2416
2418
  .input-field input.number-input:not(.browser-default)::-webkit-inner-spin-button, .input-field input.number-input:not(.browser-default)::-webkit-outer-spin-button {
@@ -2420,11 +2422,18 @@ textarea.materialize-textarea::-ms-input-placeholder {
2420
2422
  .input-field .number-input-controls {
2421
2423
  position: absolute;
2422
2424
  top: 0;
2423
- right: 0;
2425
+ right: 0.25rem;
2424
2426
  display: flex;
2425
2427
  flex-direction: column;
2426
2428
  justify-content: center;
2427
2429
  height: 3rem;
2430
+ opacity: 0;
2431
+ pointer-events: none;
2432
+ transition: opacity 0.2s ease;
2433
+ }
2434
+ .input-field:hover .number-input-controls {
2435
+ opacity: 1;
2436
+ pointer-events: auto;
2428
2437
  }
2429
2438
  .input-field .number-input-control {
2430
2439
  display: flex;
@@ -2443,10 +2452,6 @@ textarea.materialize-textarea::-ms-input-placeholder {
2443
2452
  .input-field .number-input-control:hover {
2444
2453
  background-color: var(--mm-primary-color-alpha-10, rgba(38, 166, 154, 0.1));
2445
2454
  }
2446
- .input-field .number-input-control:focus-visible {
2447
- outline: 2px solid var(--mm-primary-color, #ee6e73);
2448
- outline-offset: -2px;
2449
- }
2450
2455
  .input-field .number-input-control svg {
2451
2456
  font-size: 1.25rem;
2452
2457
  line-height: 1;
package/dist/forms.css CHANGED
@@ -1020,6 +1020,8 @@ textarea.materialize-textarea::-ms-input-placeholder {
1020
1020
 
1021
1021
  .input-field input.number-input:not(.browser-default) {
1022
1022
  -moz-appearance: textfield;
1023
+ box-sizing: border-box;
1024
+ width: calc(100% - 0.75rem);
1023
1025
  padding-right: 2rem;
1024
1026
  }
1025
1027
  .input-field input.number-input:not(.browser-default)::-webkit-inner-spin-button, .input-field input.number-input:not(.browser-default)::-webkit-outer-spin-button {
@@ -1029,11 +1031,18 @@ textarea.materialize-textarea::-ms-input-placeholder {
1029
1031
  .input-field .number-input-controls {
1030
1032
  position: absolute;
1031
1033
  top: 0;
1032
- right: 0;
1034
+ right: 0.25rem;
1033
1035
  display: flex;
1034
1036
  flex-direction: column;
1035
1037
  justify-content: center;
1036
1038
  height: 3rem;
1039
+ opacity: 0;
1040
+ pointer-events: none;
1041
+ transition: opacity 0.2s ease;
1042
+ }
1043
+ .input-field:hover .number-input-controls {
1044
+ opacity: 1;
1045
+ pointer-events: auto;
1037
1046
  }
1038
1047
  .input-field .number-input-control {
1039
1048
  display: flex;
@@ -1052,10 +1061,6 @@ textarea.materialize-textarea::-ms-input-placeholder {
1052
1061
  .input-field .number-input-control:hover {
1053
1062
  background-color: var(--mm-primary-color-alpha-10, rgba(38, 166, 154, 0.1));
1054
1063
  }
1055
- .input-field .number-input-control:focus-visible {
1056
- outline: 2px solid var(--mm-primary-color, #ee6e73);
1057
- outline-offset: -2px;
1058
- }
1059
1064
  .input-field .number-input-control svg {
1060
1065
  font-size: 1.25rem;
1061
1066
  line-height: 1;
package/dist/index.css CHANGED
@@ -6160,6 +6160,8 @@ textarea.materialize-textarea::-ms-input-placeholder {
6160
6160
 
6161
6161
  .input-field input.number-input:not(.browser-default) {
6162
6162
  -moz-appearance: textfield;
6163
+ box-sizing: border-box;
6164
+ width: calc(100% - 0.75rem);
6163
6165
  padding-right: 2rem;
6164
6166
  }
6165
6167
  .input-field input.number-input:not(.browser-default)::-webkit-inner-spin-button, .input-field input.number-input:not(.browser-default)::-webkit-outer-spin-button {
@@ -6169,11 +6171,18 @@ textarea.materialize-textarea::-ms-input-placeholder {
6169
6171
  .input-field .number-input-controls {
6170
6172
  position: absolute;
6171
6173
  top: 0;
6172
- right: 0;
6174
+ right: 0.25rem;
6173
6175
  display: flex;
6174
6176
  flex-direction: column;
6175
6177
  justify-content: center;
6176
6178
  height: 3rem;
6179
+ opacity: 0;
6180
+ pointer-events: none;
6181
+ transition: opacity 0.2s ease;
6182
+ }
6183
+ .input-field:hover .number-input-controls {
6184
+ opacity: 1;
6185
+ pointer-events: auto;
6177
6186
  }
6178
6187
  .input-field .number-input-control {
6179
6188
  display: flex;
@@ -6192,10 +6201,6 @@ textarea.materialize-textarea::-ms-input-placeholder {
6192
6201
  .input-field .number-input-control:hover {
6193
6202
  background-color: var(--mm-primary-color-alpha-10, rgba(38, 166, 154, 0.1));
6194
6203
  }
6195
- .input-field .number-input-control:focus-visible {
6196
- outline: 2px solid var(--mm-primary-color, #ee6e73);
6197
- outline-offset: -2px;
6198
- }
6199
6204
  .input-field .number-input-control svg {
6200
6205
  font-size: 1.25rem;
6201
6206
  line-height: 1;
package/dist/index.esm.js CHANGED
@@ -3780,7 +3780,7 @@ const InputField = (type, defaultClass = '') => () => {
3780
3780
  }
3781
3781
  },
3782
3782
  view: ({ attrs }) => {
3783
- var _a, _b, _c, _d, _e, _f;
3783
+ var _a, _b, _c, _d, _e, _f, _g;
3784
3784
  const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate, canClear } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate", "canClear"]);
3785
3785
  // const attributes = toAttrs(params);
3786
3786
  const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim() || undefined;
@@ -4014,12 +4014,14 @@ const InputField = (type, defaultClass = '') => () => {
4014
4014
  m('button.number-input-control.number-input-control-up[type=button]', {
4015
4015
  'aria-label': `Increase ${label || 'value'}`,
4016
4016
  title: 'Increase value',
4017
+ tabindex: -1,
4017
4018
  onmousedown: (event) => event.preventDefault(),
4018
4019
  onclick: () => stepNumberInput('up'),
4019
4020
  }, m(MaterialIcon, { name: 'chevron', direction: 'up' })),
4020
4021
  m('button.number-input-control.number-input-control-down[type=button]', {
4021
4022
  'aria-label': `Decrease ${label || 'value'}`,
4022
4023
  title: 'Decrease value',
4024
+ tabindex: -1,
4023
4025
  onmousedown: (event) => event.preventDefault(),
4024
4026
  onclick: () => stepNumberInput('down'),
4025
4027
  }, m(MaterialIcon, { name: 'chevron' })),
@@ -4045,7 +4047,7 @@ const InputField = (type, defaultClass = '') => () => {
4045
4047
  initialValue: value !== undefined && value !== '',
4046
4048
  helperText,
4047
4049
  dataError: state.hasInteracted && !state.isValid ? dataError : undefined,
4048
- dataSuccess: state.hasInteracted && state.isValid ? dataSuccess : undefined,
4050
+ dataSuccess: state.hasInteracted && state.isValid && ((_g = state.inputElement) === null || _g === void 0 ? void 0 : _g.value) ? dataSuccess : undefined,
4049
4051
  }),
4050
4052
  maxLength && typeof value === 'string'
4051
4053
  ? m(CharacterCounter, {