@material/mwc-checkbox - npm Package Compare versions

Comparing version 0.23.0-canary.73e9f83c.0 to 0.23.0-canary.756208fb.0

mwc-checkbox-base.d.ts

@@ -18,3 +18,3 @@ /**
     disabled: boolean;
-    name?: string;
+    name: string;
     value: string;
@@ -36,3 +36,2 @@ /** @soyPrefixAttribute */
     protected focused: boolean;
-    protected useStateLayerCustomProperties: boolean;
     ripple: Promise<Ripple | null>;
@@ -48,2 +47,4 @@ protected mdcFoundationClass: undefined;
     protected renderRipple(): TemplateResult | string;
+    /** @soyTemplate */
+    protected renderRippleTemplate(): TemplateResult;
     /**
@@ -55,2 +56,3 @@ * @soyTemplate
     protected render(): TemplateResult;
+    protected setFormData(formData: FormData): void;
     protected handleFocus(): void;
@@ -57,0 +59,0 @@ protected handleBlur(): void;

mwc-checkbox-base.js

@@ -1,2 +0,1 @@
-import { __decorate } from "tslib";
 /**
@@ -7,2 +6,5 @@ * @license
  */
+import { __decorate } from "tslib";
+// Style preference for leading underscores.
+// tslint:disable:strip-private-property-underscore
 import '@material/mwc-ripple/mwc-ripple';
@@ -22,3 +24,4 @@ import { ariaProperty } from '@material/mwc-base/aria-property';
         this.disabled = false;
-        this.value = '';
+        this.name = '';
+        this.value = 'on';
         /**
@@ -33,3 +36,2 @@ * Touch target extends beyond visual boundary of a component by default.
         this.focused = false;
-        this.useStateLayerCustomProperties = false;
         // MDC Foundation is unused
@@ -77,7 +79,9 @@ this.mdcFoundationClass = undefined;
     renderRipple() {
-        return this.shouldRenderRipple ? html `<mwc-ripple
+        return this.shouldRenderRipple ? this.renderRippleTemplate() : '';
+    }
+    /** @soyTemplate */
+    renderRippleTemplate() {
+        return html `<mwc-ripple
         .disabled="${this.disabled}"
-        .internalUseStateLayerCustomProperties="${this.useStateLayerCustomProperties}"
-        unbounded></mwc-ripple>` :
-            '';
+        unbounded></mwc-ripple>`;
     }
@@ -146,2 +150,7 @@ /**
     }
+    setFormData(formData) {
+        if (this.name && this.checked) {
+            formData.append(this.name, this.value);
+        }
+    }
     handleFocus() {
@@ -239,5 +248,2 @@ this.focused = true;
 __decorate([
-    state()
-], CheckboxBase.prototype, "useStateLayerCustomProperties", void 0);
-__decorate([
     queryAsync('mwc-ripple')
@@ -244,0 +250,0 @@ ], CheckboxBase.prototype, "ripple", void 0);

mwc-checkbox.d.ts

@@ -0,1 +1,6 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
 import { CheckboxBase } from './mwc-checkbox-base';
@@ -2,0 +7,0 @@ declare global {

mwc-checkbox.js

@@ -1,2 +0,1 @@
-import { __decorate } from "tslib";
 /**
@@ -7,2 +6,5 @@ * @license
  */
+import { __decorate } from "tslib";
+// Style preference for leading underscores.
+// tslint:disable:strip-private-property-underscore
 import { customElement } from 'lit-element';
@@ -9,0 +11,0 @@ import { CheckboxBase } from './mwc-checkbox-base';

package.json

 {
   "name": "@material/mwc-checkbox",
-  "version": "0.23.0-canary.73e9f83c.0",
+  "version": "0.23.0-canary.756208fb.0",
   "description": "Material Design checkbox web component",
@@ -19,4 +19,4 @@ "keywords": [
   "dependencies": {
-    "@material/mwc-base": "0.23.0-canary.73e9f83c.0",
-    "@material/mwc-ripple": "0.23.0-canary.73e9f83c.0",
+    "@material/mwc-base": "0.23.0-canary.756208fb.0",
+    "@material/mwc-ripple": "0.23.0-canary.756208fb.0",
     "lit-element": "^2.5.1",
@@ -30,5 +30,5 @@ "lit-html": "^1.4.1",
   "devDependencies": {
-    "@material/checkbox": "=12.0.0-canary.22d29cbb4.0",
-    "@material/theme": "=12.0.0-canary.22d29cbb4.0",
-    "@material/touch-target": "=12.0.0-canary.22d29cbb4.0"
+    "@material/checkbox": "=13.0.0-canary.15981e9d9.0",
+    "@material/theme": "=13.0.0-canary.15981e9d9.0",
+    "@material/touch-target": "=13.0.0-canary.15981e9d9.0"
   },
@@ -38,3 +38,3 @@ "publishConfig": {
   },
-  "gitHead": "7cb506f7d4ddb8897417b2451e1dce233644faea"
+  "gitHead": "f13e06c94f8ec287642a6c4a258c32f5be7a17e6"
 }

README.md

@@ -10,3 +10,3 @@ # `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)
 
-[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)
+[Demo](https://material-components.github.io/material-web/demos/checkbox/)
 
@@ -31,3 +31,3 @@ ## Installation
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/checkbox/images/checked.png" width="29px" height="29px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/checkbox/images/checked.png" width="29px" height="29px">
 
@@ -49,3 +49,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/checkbox/images/standard_disabled.png" height="80px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/checkbox/images/standard_disabled.png" height="80px">
 
@@ -68,3 +68,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/checkbox/images/styled_standard_disabled.png" height="80px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/checkbox/images/styled_standard_disabled.png" height="80px">
 
@@ -101,6 +101,6 @@ ```html
 Most applications should use
-[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)
+[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)
 to associate an interactive label with the checkbox.
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/checkbox/images/formfield.png" width="132px" height="123px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/checkbox/images/formfield.png" width="132px" height="123px">
 
@@ -162,5 +162,5 @@ ```html
 -------------------------------- | ------------------------------------------------------------- | -----------
-`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).
-`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.
-`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.
+`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).
+`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.
+`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.
 
@@ -167,0 +167,0 @@ #### Global Custom Properties

No alert changes

Improved metrics

Total package byte prevSize

83265

1.04%

Lines of code

413

3.77%

Dependency changes

• + Added

  @material/mwc-base@0.23.0-canary.756208fb.0
  (transitive)

• + Added

  @material/mwc-ripple@0.23.0-canary.756208fb.0
  (transitive)

• - Removed

  @material/mwc-base@0.23.0-canary.73e9f83c.0
  (transitive)

• - Removed

  @material/mwc-ripple@0.23.0-canary.73e9f83c.0
  (transitive)

• Updated

  @material/mwc-base@0.23.0-canary.756208fb.0

• Updated

  @material/mwc-ripple@0.23.0-canary.756208fb.0