@umbraco-ui/uui-checkbox - npm Package Compare versions

Comparing version 1.9.0-rc.1 to 1.9.0

custom-elements.json

@@ -22,2 +22,8 @@ {
         {
+          "name": "indeterminate",
+          "description": "Indeterminate state for the input.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
           "name": "disabled",
@@ -98,2 +104,9 @@ "description": "Disables the input.",
         {
+          "name": "indeterminate",
+          "attribute": "indeterminate",
+          "description": "Indeterminate state for the input.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
           "name": "disabled",
@@ -100,0 +113,0 @@ "attribute": "disabled",

lib/index.js

 import { UUIHorizontalShakeKeyframes, UUIHorizontalShakeAnimationValue } from '@umbraco-ui/uui-base/lib/animations';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUIBooleanInputElement } from '@umbraco-ui/uui-boolean-input/lib';
-import { iconCheck } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
+import { iconSubtract, iconCheck } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
 import { css, html } from 'lit';
@@ -21,3 +21,5 @@
       <div id="ticker">
-        <div id="icon-check">${iconCheck}</div>
+        <div id="icon-check">
+          ${this.indeterminate ? iconSubtract : iconCheck}
+        </div>
       </div>
@@ -85,11 +87,14 @@ `;
       }
-      input:checked:not([disabled]) + #ticker {
+      input:checked:not([disabled]) + #ticker,
+      input:indeterminate:not([disabled]) + #ticker {
         border-color: var(--uui-color-selected,#3544b1);
       }
 
-      label:hover input:checked:not([disabled]) + #ticker {
+      label:hover input:checked:not([disabled]) + #ticker,
+      label:hover input:indeterminate:not([disabled]) + #ticker {
         border-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
       }
 
-      label:focus input:checked + #ticker {
+      label:focus input:checked + #ticker,
+      label:focus input:indeterminate + #ticker {
         border-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
@@ -129,14 +134,18 @@ }
       }
-      label:hover input:checked:not([disabled]) + #ticker::before {
+      label:hover input:checked:not([disabled]) + #ticker::before,
+      label:hover input:indeterminate:not([disabled]) + #ticker::before {
         background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
       }
 
-      input:checked + #ticker::before {
+      input:checked + #ticker::before,
+      input:indeterminate + #ticker::before {
         transform: scale(1);
         opacity: 1;
       }
-      input:checked + #ticker #icon-check {
+      input:checked + #ticker #icon-check,
+      input:indeterminate + #ticker #icon-check {
         opacity: 1;
       }
-      label:focus input:checked + #ticker {
+      label:focus input:checked + #ticker,
+      label:focus input:indeterminate + #ticker {
         background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
@@ -158,6 +167,16 @@ }
 
+      :host(:not([disabled], [readonly]))
+        label:active
+        input:indeterminate
+        + #ticker::before {
+        /** Stretch when mouse down */
+        transform: scale(0.9);
+      }
+
       :host(:not([pristine]):invalid) #ticker,
       :host(:not([pristine]):invalid) label:hover #ticker,
       :host(:not([pristine]):invalid) label:hover input:checked:not([disabled]) + #ticker,
+      :host(:not([pristine]):invalid) label:hover input:indeterminate:not([disabled]) + #ticker,
       :host(:not([pristine]):invalid) label:focus input:checked + #ticker,
+      :host(:not([pristine]):invalid) label:focus input:indeterminate + #ticker,
       /* polyfill support */
@@ -167,3 +186,5 @@ :host(:not([pristine])[internals-invalid]) #ticker,
       :host(:not([pristine])[internals-invalid]) label:hover input:checked:not([disabled]) + #ticker,
-      :host(:not([pristine])[internals-invalid]) label:focus input:checked + #ticker {
+      :host(:not([pristine])[internals-invalid]) label:hover input:indeterminate:not([disabled]) + #ticker,
+      :host(:not([pristine])[internals-invalid]) label:focus input:checked + #ticker,
+      :host(:not([pristine])[internals-invalid]) label:focus input:indeterminate + #ticker {
         border: 1px solid var(--uui-color-danger-standalone,rgb(191, 33, 78));
@@ -178,2 +199,5 @@ }
       }
+      :host([disabled]) input:indeterminate + #ticker {
+        background-color: var(--uui-color-disabled,#f3f3f5);
+      }
       :host([disabled]) #ticker::before {
@@ -188,3 +212,4 @@ background-color: var(--uui-color-disabled,#f3f3f5);
       }
-      :host([disabled]) input:checked + #ticker #icon-check {
+      :host([disabled]) input:checked + #ticker #icon-check,
+      :host([disabled]) input:indeterminate + #ticker #icon-check {
         color: var(--uui-color-disabled-contrast,#c4c4c4);
@@ -191,0 +216,0 @@ }

package.json

 {
   "name": "@umbraco-ui/uui-checkbox",
-  "version": "1.9.0-rc.1",
+  "version": "1.9.0",
   "license": "MIT",
@@ -36,5 +36,5 @@ "keywords": [
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.9.0-rc.1",
-    "@umbraco-ui/uui-boolean-input": "1.9.0-rc.1",
-    "@umbraco-ui/uui-icon-registry-essential": "1.9.0-rc.1"
+    "@umbraco-ui/uui-base": "1.9.0",
+    "@umbraco-ui/uui-boolean-input": "1.9.0",
+    "@umbraco-ui/uui-icon-registry-essential": "1.9.0"
   },
@@ -50,3 +50,3 @@ "scripts": {
   "homepage": "https://uui.umbraco.com/?path=/story/uui-checkbox",
-  "gitHead": "7092b4717d8b9d4825b15e087508b8f75bf81a92"
+  "gitHead": "37111ea2cebb5883dcef0e682916f1e101013123"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20000

increased by12.11%

Number of package files

8

increased by14.29%

Lines of code

458

increased by14.21%

Number of low quality alerts

0

decreased by-100%

Dependency changes

• + Added@umbraco-ui/uui-base@1.9.0(transitive)

• + Added@umbraco-ui/uui-boolean-input@1.9.0(transitive)

• - Removed@umbraco-ui/uui-base@1.9.0-rc.1(transitive)

• - Removed@umbraco-ui/uui-boolean-input@1.9.0-rc.1(transitive)

• Updated@umbraco-ui/uui-base@1.9.0

• Updated@umbraco-ui/uui-boolean-input@1.9.0

• Updated@umbraco-ui/uui-icon-registry-essential@1.9.0