@kws3/ui 2.1.3 → 2.1.4

package/CHANGELOG.mdx

@@ -1,3 +1,6 @@
+# 2.1.4
+  - Fix bug where disabled Checkbox components wrongly appeared as if they were checked
+
 # 2.1.3
  - `PasswordInput` - add support for field `autocomplete` and `required`
  - `PasswordValidator` - fix `valid` field binding

package/controls/NumberInput.svelte

@@ -14,6 +14,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   @param {boolean} [disabled=false] - Disables the NumberInput, Default: `false`
   @param {boolean} [fullwidth=false] - Forces the NumberInput to occupy the full width of it's container, Default: `false`
   @param {boolean} [typeable=true] - Allows typing the value into the input, Default: `true`
+  @param {string} [input_class=""] - Adds a css class to the input field, Default: `""`
   @param {string} [minus_icon="minus"] - Name of the icon that is to be displayed in the minus button, Default: `"minus"`
   @param {ColorOptions} [minus_icon_color=danger] - Color of the Minus Icon, Default: `danger`
   @param {ColorOptions} [minus_button_color=] - Color of the Minus Button, Default: ``
@@ -35,8 +36,8 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   <input
     {style}
     data-testid="input"
-    class="input has-text-centered {klass} is-{size} is-{value < min ||
-    value > max
+    class="input has-text-centered {klass} {input_class} is-{size} is-{value <
+      min || value > max
       ? 'danger'
       : ''}"
     type="number"
@@ -67,8 +68,10 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
     </div>
     <div class="control is-{fullwidth ? 'expanded' : 'narrow'}">
       <input
+        style="z-index:1"
         data-testid="input"
-        class="input has-text-centered is-{size} is-{value < min || value > max
+        class="input has-text-centered {input_class} is-{size} is-{value <
+          min || value > max
           ? 'danger'
           : ''}"
         type="number"
@@ -172,6 +175,10 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
      * Allows typing the value into the input
      */
     typeable = true,
+    /**
+     * Adds a css class to the input field
+     */
+    input_class = "",
     /**
      * Name of the icon that is to be displayed in the minus button
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "typescript": "^5.0.4"
   },
-  "gitHead": "021ed6b77f9600a544b6fe567104887a0a3f0358"
+  "gitHead": "801fdf5363f25ccb04d1a6506bb2c51e0a8506cc"
 }

package/styles/CheckRadio.scss

@@ -130,10 +130,16 @@ $kws-checkradio-focus-box-shadow-color: $input-focus-box-shadow-color !default;
     }
   }
 
-  input[type="checkbox"]:disabled + .kws-checkbox-label,
-  input[type="radio"]:disabled + .kws-checkbox-label,
   input[type="checkbox"]:disabled ~ .icon,
   input[type="radio"]:disabled ~ .icon {
+    opacity: 0;
+    cursor: not-allowed;
+  }
+
+  input[type="checkbox"]:disabled + .kws-checkbox-label,
+  input[type="radio"]:disabled + .kws-checkbox-label,
+  input[type="checkbox"]:checked:disabled ~ .icon,
+  input[type="radio"]:checked:disabled ~ .icon {
     opacity: 0.5;
     cursor: not-allowed;
   }