@umbraco-ui/uui-checkbox 1.9.0-rc.1 → 1.10.0-rc.0

package/custom-elements.json

@@ -18,6 +18,12 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "indeterminate",
+          "description": "Indeterminate state for the input.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "disabled",
           "description": "Disables the input.",
@@ -93,6 +99,13 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "indeterminate",
+          "attribute": "indeterminate",
+          "description": "Indeterminate state for the input.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "disabled",
           "attribute": "disabled",

package/lib/index.js

@@ -1,7 +1,7 @@
 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';
 
 var __defProp = Object.defineProperty;
@@ -18,7 +18,9 @@ let UUICheckboxElement = class extends UUIBooleanInputElement {
   renderCheckbox() {
     return html`
       <div id="ticker">
-        <div id="icon-check">${iconCheck}</div>
+        <div id="icon-check">
+          ${this.indeterminate ? iconSubtract : iconCheck}
+        </div>
       </div>
     `;
   }
@@ -81,15 +83,18 @@ UUICheckboxElement.styles = [
           var(--uui-color-surface-emphasis,rgb(250, 250, 250))
         );
       }
-      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));
       }
 
@@ -124,18 +129,22 @@ UUICheckboxElement.styles = [
         transform: scale(0);
         opacity: 0;
       }
-      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));
       }
 
@@ -152,15 +161,27 @@ UUICheckboxElement.styles = [
         transform: scale(0.9);
       }
 
+      :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 */
       :host(:not([pristine])[internals-invalid]) #ticker,
       :host(:not([pristine])[internals-invalid]) label:hover #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));
       }
 
@@ -170,6 +191,9 @@ UUICheckboxElement.styles = [
       :host([disabled]) input:checked + #ticker {
         background-color: var(--uui-color-disabled,#f3f3f5);
       }
+      :host([disabled]) input:indeterminate + #ticker {
+        background-color: var(--uui-color-disabled,#f3f3f5);
+      }
       :host([disabled]) #ticker::before {
         background-color: var(--uui-color-disabled,#f3f3f5);
       }
@@ -179,7 +203,8 @@ UUICheckboxElement.styles = [
       :host([disabled]) label:active #ticker {
         animation: ${UUIHorizontalShakeAnimationValue};
       }
-      :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);
       }
     `

package/lib/uui-checkbox-indeterminate.example.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import '@umbraco-ui/uui-checkbox/lib';
+export type Option = {
+    value: string;
+    label: string;
+};
+export default class UUICheckboxIndeterminateExample extends LitElement {
+    label: string;
+    parent: Option;
+    options: Option[];
+    values: string[];
+    private _handleParentChange;
+    private _handleOptionChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-checkbox-indeterminate-example': UUICheckboxIndeterminateExample;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-checkbox",
-  "version": "1.9.0-rc.1",
+  "version": "1.10.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -33,9 +33,9 @@
     "custom-elements.json"
   ],
   "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.10.0-rc.0",
+    "@umbraco-ui/uui-boolean-input": "1.10.0-rc.0",
+    "@umbraco-ui/uui-icon-registry-essential": "1.10.0-rc.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-checkbox",
-  "gitHead": "7092b4717d8b9d4825b15e087508b8f75bf81a92"
+  "gitHead": "f7982264bca0f2db4109c638e458f10719b1c22f"
 }