Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@material/mwc-checkbox

Package Overview
Dependencies
Maintainers
21
Versions
721
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/mwc-checkbox - npm Package Compare versions

Comparing version 0.23.0-canary.104debd5.0 to 0.23.0-canary.17d51f76.0

9

mwc-checkbox-base.d.ts

@@ -21,7 +21,7 @@ /**

/** @soyPrefixAttribute */
ariaLabel?: string;
ariaLabel: string;
/** @soyPrefixAttribute */
ariaLabelledBy?: string;
ariaLabelledBy: string;
/** @soyPrefixAttribute */
ariaDescribedBy?: string;
ariaDescribedBy: string;
/**

@@ -36,3 +36,2 @@ * Touch target extends beyond visual boundary of a component by default.

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;
/**

@@ -50,0 +51,0 @@ * @soyTemplate

@@ -34,3 +34,2 @@ /**

this.focused = false;
this.useStateLayerCustomProperties = false;
// MDC Foundation is unused

@@ -78,7 +77,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>`;
}

@@ -244,5 +245,2 @@ /**

__decorate([
state()
], CheckboxBase.prototype, "useStateLayerCustomProperties", void 0);
__decorate([
queryAsync('mwc-ripple')

@@ -249,0 +247,0 @@ ], CheckboxBase.prototype, "ripple", void 0);

{
"name": "@material/mwc-checkbox",
"version": "0.23.0-canary.104debd5.0",
"version": "0.23.0-canary.17d51f76.0",
"description": "Material Design checkbox web component",

@@ -19,4 +19,4 @@ "keywords": [

"dependencies": {
"@material/mwc-base": "0.23.0-canary.104debd5.0",
"@material/mwc-ripple": "0.23.0-canary.104debd5.0",
"@material/mwc-base": "0.23.0-canary.17d51f76.0",
"@material/mwc-ripple": "0.23.0-canary.17d51f76.0",
"lit-element": "^2.5.1",

@@ -30,5 +30,5 @@ "lit-html": "^1.4.1",

"devDependencies": {
"@material/checkbox": "=12.0.0-canary.38d1846cc.0",
"@material/theme": "=12.0.0-canary.38d1846cc.0",
"@material/touch-target": "=12.0.0-canary.38d1846cc.0"
"@material/checkbox": "=13.0.0-canary.72464476c.0",
"@material/theme": "=13.0.0-canary.72464476c.0",
"@material/touch-target": "=13.0.0-canary.72464476c.0"
},

@@ -38,3 +38,3 @@ "publishConfig": {

},
"gitHead": "9dde76584b6e4258f93d65b54a1f9695d2dddb1a"
"gitHead": "eac5c1fc9472a1c28736c4d8e0d423e195fe5723"
}

@@ -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/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/checkbox/images/checked.png" width="29px" height="29px">
<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/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/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/checkbox/images/standard_disabled.png" height="80px">
<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/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/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/checkbox/images/styled_standard_disabled.png" height="80px">
<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/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/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/checkbox/images/formfield.png" width="132px" height="123px">
<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/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/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/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/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/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/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/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/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/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/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/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/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/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

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc