@material/mwc-radio - npm Package Compare versions

Comparing version 0.12.0 to 0.13.0

mwc-radio-base.d.ts

@@ -20,2 +20,5 @@ /**
 import MDCRadioFoundation from '@material/radio/foundation.js';
+/**
+ * @fires checked
+ */
 export declare class RadioBase extends FormElement {
@@ -26,22 +29,24 @@ protected mdcRoot: HTMLElement;
     private _checked;
+    global: boolean;
+    get checked(): boolean;
     /**
-    * We define our own getter/setter for `checked` because we need to track
-    * changes to it synchronously.
-    *
-    * The order in which the `checked` property is set across radio buttons
-    * within the same group is very important. However, we can't rely on
-    * UpdatingElement's `updated` callback to observe these changes (which is
-    * also what the `@observer` decorator uses), because it batches changes to
-    * all properties.
-    *
-    * Consider:
-    *
-    *   radio1.disabled = true;
-    *   radio2.checked = true;
-    *   radio1.checked = true;
-    *
-    * In this case we'd first see all changes for radio1, and then for radio2,
-    * and we couldn't tell that radio1 was the most recently checked.
-    */
-    checked: boolean;
+     * We define our own getter/setter for `checked` because we need to track
+     * changes to it synchronously.
+     *
+     * The order in which the `checked` property is set across radio buttons
+     * within the same group is very important. However, we can't rely on
+     * UpdatingElement's `updated` callback to observe these changes (which is
+     * also what the `@observer` decorator uses), because it batches changes to
+     * all properties.
+     *
+     * Consider:
+     *
+     *   radio1.disabled = true;
+     *   radio2.checked = true;
+     *   radio1.checked = true;
+     *
+     * In this case we'd first see all changes for radio1, and then for radio2,
+     * and we couldn't tell that radio1 was the most recently checked.
+     */
+    set checked(checked: boolean);
     disabled: boolean;
@@ -57,3 +62,3 @@ value: string;
     focusNative(): void;
-    readonly ripple: import("@material/ripple/foundation").MDCRippleFoundation | undefined;
+    get ripple(): import("@material/ripple/foundation").MDCRippleFoundation | undefined;
     protected createAdapter(): MDCRadioAdapter;
@@ -83,3 +88,5 @@ private _changeHandler;
     private updating;
-    static getController(element: HTMLElement): SelectionController;
+    static getController(element: HTMLElement | HTMLElement & {
+        global: boolean;
+    }): SelectionController;
     constructor(element: Node);
@@ -86,0 +93,0 @@ protected keyDownHandler(e: KeyboardEvent): void;

mwc-radio-base.js

@@ -22,2 +22,5 @@ import { __decorate } from "tslib";
 import { html, property, query } from 'lit-element';
+/**
+ * @fires checked
+ */
 export class RadioBase extends FormElement {
@@ -27,2 +30,3 @@ constructor() {
         this._checked = false;
+        this.global = false;
         this.disabled = false;
@@ -68,2 +72,4 @@ this.value = '';
         this.requestUpdate('checked', oldValue);
+        // useful when unchecks self and wrapping element needs to synchronize
+        this.dispatchEvent(new Event('checked', { bubbles: true, composed: true }));
     }
@@ -165,2 +171,5 @@ _handleUpdatedValue(newValue) {
 __decorate([
+    property({ type: Boolean })
+], RadioBase.prototype, "global", void 0);
+__decorate([
     property({ type: Boolean, reflect: true })
@@ -212,3 +221,6 @@ ], RadioBase.prototype, "checked", null);
     static getController(element) {
-        const root = element.getRootNode();
+        const useGlobal = !('global' in element) || ('global' in element && element.global);
+        const root = useGlobal ?
+            document :
+            element.getRootNode();
         let controller = root[selectionController];
@@ -215,0 +227,0 @@ if (controller === undefined) {

package.json

 {
   "name": "@material/mwc-radio",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "",
@@ -18,5 +18,5 @@ "main": "mwc-radio.js",
   "dependencies": {
-    "@material/mwc-base": "^0.12.0",
-    "@material/mwc-ripple": "^0.12.0",
-    "@material/radio": "=5.0.0-canary.1c494e567.0",
+    "@material/mwc-base": "^0.13.0",
+    "@material/mwc-ripple": "^0.13.0",
+    "@material/radio": "=5.0.0-canary.a1a0deb3e.0",
     "lit-element": "^2.2.1",
@@ -28,3 +28,3 @@ "tslib": "^1.10.0"
   },
-  "gitHead": "4c0dc16b89066f24fca4efcf78c36c87657f0a03"
+  "gitHead": "054d0d234704a274e8aaf7d8a8a0399f525914eb"
 }

README.md

@@ -8,3 +8,3 @@ # `<mwc-radio>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-radio.svg)](https://www.npmjs.com/package/@material/mwc-radio)
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/4c0dc16b89066f24fca4efcf78c36c87657f0a03/packages/radio/images/standard.png" width="84px" height="48px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/054d0d234704a274e8aaf7d8a8a0399f525914eb/packages/radio/images/standard.png" width="84px" height="48px">
 
@@ -31,3 +31,3 @@ [Material Design Guidelines: Radio buttons](https://material.io/design/components/selection-controls.html#radio-buttons)
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/4c0dc16b89066f24fca4efcf78c36c87657f0a03/packages/radio/images/standard.png" width="84px" height="48px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/054d0d234704a274e8aaf7d8a8a0399f525914eb/packages/radio/images/standard.png" width="84px" height="48px">
 
@@ -45,3 +45,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/4c0dc16b89066f24fca4efcf78c36c87657f0a03/packages/radio/images/custom_color.png" height="40px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/054d0d234704a274e8aaf7d8a8a0399f525914eb/packages/radio/images/custom_color.png" height="40px">
 
@@ -64,3 +64,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/4c0dc16b89066f24fca4efcf78c36c87657f0a03/packages/radio/images/disabled_custom_color.png" height="40px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/054d0d234704a274e8aaf7d8a8a0399f525914eb/packages/radio/images/disabled_custom_color.png" height="40px">
 
@@ -86,3 +86,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/4c0dc16b89066f24fca4efcf78c36c87657f0a03/packages/radio/images/formfield.png" width="94px" height="80px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/054d0d234704a274e8aaf7d8a8a0399f525914eb/packages/radio/images/formfield.png" width="94px" height="80px">
 
@@ -123,2 +123,3 @@ ```html
 | `value`         | `string`  | `''`    | Value of the input for form submission. Maps to the native [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#value) attribute.
+| `global`        | `boolean` | `false` | If `true`, this radio button will use a global, document-level scope for its selection group rather than its local shadow root.
 
@@ -138,5 +139,5 @@ ### Methods
 | ----------------------- | -------------------------------------- |------------
-| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c0dc16b89066f24fca4efcf78c36c87657f0a03/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.
-| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c0dc16b89066f24fca4efcf78c36c87657f0a03/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.
-| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c0dc16b89066f24fca4efcf78c36c87657f0a03/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.
+| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/054d0d234704a274e8aaf7d8a8a0399f525914eb/packages/radio/images/color_018786.png) `#018786` | Color of the radio button.
+| `--mdc-radio-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/054d0d234704a274e8aaf7d8a8a0399f525914eb/packages/radio/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the ring of an unchecked radio.
+| `--mdc-radio-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/054d0d234704a274e8aaf7d8a8a0399f525914eb/packages/radio/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the ring and circle of a disabled radio.
 
@@ -143,0 +144,0 @@ ## Additional references

src/mwc-radio-base.ts

@@ -23,2 +23,5 @@ /**
 
+/**
+ * @fires checked
+ */
 export class RadioBase extends FormElement {
@@ -33,2 +36,4 @@ @query('.mdc-radio') protected mdcRoot!: HTMLElement;
 
+  @property({type: Boolean}) global = false;
+
   @property({type: Boolean, reflect: true})
@@ -71,2 +76,5 @@ get checked() {
     this.requestUpdate('checked', oldValue);
+
+    // useful when unchecks self and wrapping element needs to synchronize
+    this.dispatchEvent(new Event('checked', {bubbles: true, composed: true}));
   }
@@ -220,5 +228,9 @@
 
-  static getController(element: HTMLElement) {
-    const root = element.getRootNode() as Node &
-        {[selectionController]?: SelectionController};
+  static getController(element: HTMLElement|HTMLElement&{global: boolean}) {
+    const useGlobal =
+        !('global' in element) || ('global' in element && element.global);
+    const root = useGlobal ?
+        document as Document & {[selectionController]?: SelectionController} :
+        element.getRootNode() as Node &
+            {[selectionController]?: SelectionController};
     let controller = root[selectionController];
@@ -225,0 +237,0 @@ if (controller === undefined) {

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

Improved metrics

Total package byte prevSize

96275

increased by2.19%

Lines of code

889

increased by3.37%

Number of lines in readme file

140

increased by0.72%

Dependency changes

• + Added@material/mwc-base@0.13.0(transitive)

• + Added@material/mwc-ripple@0.13.0(transitive)

• - Removed@material/mwc-base@0.12.0(transitive)

• - Removed@material/mwc-ripple@0.12.0(transitive)

• Updated@material/mwc-base@^0.13.0

• Updated@material/mwc-ripple@^0.13.0

• Updated@material/radio@=5.0.0-canary.a1a0deb3e.0