@polymer/paper-radio-button - npm Package Compare versions

Comparing version 3.0.0-pre.21 to 3.0.0-pre.22

package.json

@@ -17,32 +17,24 @@ {
   "devDependencies": {
-    "@polymer/gen-typescript-declarations": "^1.2.2",
-    "bower": "^1.8.0",
     "webmat": "^0.2.0",
-    "@polymer/iron-component-page": "^3.0.0-pre.21",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.21",
-    "@polymer/iron-test-helpers": "^3.0.0-pre.21",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.20",
+    "@polymer/iron-test-helpers": "^3.0.0-pre.20",
     "wct-browser-legacy": "^1.0.1",
-    "@webcomponents/webcomponentsjs": "^2.0.0"
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "@polymer/gen-typescript-declarations": "^1.5.0"
   },
   "scripts": {
-    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .",
-    "format": "webmat && npm run update-types"
+    "format": "webmat",
+    "generate-types": "gen-typescript-declarations --deleteExisting --outDir .",
+    "prepack": "npm run generate-types"
   },
-  "version": "3.0.0-pre.21",
-  "resolutions": {
-    "inherits": "2.0.3",
-    "samsam": "1.1.3",
-    "supports-color": "3.1.2",
-    "type-detect": "1.0.0",
-    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
-  },
+  "version": "3.0.0-pre.22",
   "main": "paper-radio-button.js",
   "author": "The Polymer Authors",
   "dependencies": {
-    "@polymer/iron-checked-element-behavior": "^3.0.0-pre.21",
-    "@polymer/iron-flex-layout": "^3.0.0-pre.21",
-    "@polymer/paper-behaviors": "^3.0.0-pre.21",
-    "@polymer/paper-styles": "^3.0.0-pre.21",
+    "@polymer/iron-checked-element-behavior": "^3.0.0-pre.20",
+    "@polymer/iron-flex-layout": "^3.0.0-pre.20",
+    "@polymer/paper-behaviors": "^3.0.0-pre.20",
+    "@polymer/paper-styles": "^3.0.0-pre.20",
     "@polymer/polymer": "^3.0.0"
   }
 }

paper-radio-button.js

@@ -10,9 +10,149 @@ /**
 */
+import '@polymer/polymer/polymer-legacy.js';
+import '@polymer/paper-styles/default-theme.js';
+import '@polymer/iron-flex-layout/iron-flex-layout.js';
+
+import {PaperCheckedElementBehavior} from '@polymer/paper-behaviors/paper-checked-element-behavior.js';
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';
+
+const template = html`
+<style>
+  :host {
+    display: inline-block;
+    line-height: 0;
+    white-space: nowrap;
+    cursor: pointer;
+    @apply --paper-font-common-base;
+    --calculated-paper-radio-button-size: var(--paper-radio-button-size, 16px);
+    /* -1px is a sentinel for the default and is replace in \`attached\`. */
+    --calculated-paper-radio-button-ink-size: var(--paper-radio-button-ink-size, -1px);
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  #radioContainer {
+    @apply --layout-inline;
+    @apply --layout-center-center;
+    position: relative;
+    width: var(--calculated-paper-radio-button-size);
+    height: var(--calculated-paper-radio-button-size);
+    vertical-align: middle;
+
+    @apply --paper-radio-button-radio-container;
+  }
+
+  #ink {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    right: auto;
+    width: var(--calculated-paper-radio-button-ink-size);
+    height: var(--calculated-paper-radio-button-ink-size);
+    color: var(--paper-radio-button-unchecked-ink-color, var(--primary-text-color));
+    opacity: 0.6;
+    pointer-events: none;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+  }
+
+  #ink[checked] {
+    color: var(--paper-radio-button-checked-ink-color, var(--primary-color));
+  }
+
+  #offRadio, #onRadio {
+    position: absolute;
+    box-sizing: border-box;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  #offRadio {
+    border: 2px solid var(--paper-radio-button-unchecked-color, var(--primary-text-color));
+    background-color: var(--paper-radio-button-unchecked-background-color, transparent);
+    transition: border-color 0.28s;
+  }
+
+  #onRadio {
+    background-color: var(--paper-radio-button-checked-color, var(--primary-color));
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    transition: -webkit-transform ease 0.28s;
+    transition: transform ease 0.28s;
+    will-change: transform;
+  }
+
+  :host([checked]) #offRadio {
+    border-color: var(--paper-radio-button-checked-color, var(--primary-color));
+  }
+
+  :host([checked]) #onRadio {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  }
+
+  #radioLabel {
+    line-height: normal;
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: var(--paper-radio-button-label-spacing, 10px);
+    white-space: normal;
+    color: var(--paper-radio-button-label-color, var(--primary-text-color));
+
+    @apply --paper-radio-button-label;
+  }
+
+  :host([checked]) #radioLabel {
+    @apply --paper-radio-button-label-checked;
+  }
+
+  #radioLabel:dir(rtl) {
+    margin-left: 0;
+    margin-right: var(--paper-radio-button-label-spacing, 10px);
+  }
+
+  #radioLabel[hidden] {
+    display: none;
+  }
+
+  /* disabled state */
+
+  :host([disabled]) #offRadio {
+    border-color: var(--paper-radio-button-unchecked-color, var(--primary-text-color));
+    opacity: 0.5;
+  }
+
+  :host([disabled][checked]) #onRadio {
+    background-color: var(--paper-radio-button-unchecked-color, var(--primary-text-color));
+    opacity: 0.5;
+  }
+
+  :host([disabled]) #radioLabel {
+    /* slightly darker than the button, so that it's readable */
+    opacity: 0.65;
+  }
+</style>
+
+<div id="radioContainer">
+  <div id="offRadio"></div>
+  <div id="onRadio"></div>
+</div>
+
+<div id="radioLabel"><slot></slot></div>`;
+template.setAttribute('strip-whitespace', '');
+
 /**
 Material design: [Radio button](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button)
 
-`paper-radio-button` is a button that can be either checked or unchecked.
-User can tap the radio button to check or uncheck it.
+`paper-radio-button` is a button that can be either checked or unchecked. The
+user can tap the radio button to check or uncheck it.
 
-Use a `<paper-radio-group>` to group a set of radio buttons.  When radio buttons
+Use a `<paper-radio-group>` to group a set of radio buttons. When radio buttons
 are inside a radio group, exactly one radio button in the group can be checked
@@ -45,162 +185,13 @@ at any time.
 
-This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
-In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
+This element applies the mixin `--paper-font-common-base` but does not import
+`paper-styles/typography.html`. In order to apply the `Roboto` font to this
+element, make sure you've imported `paper-styles/typography.html`.
 
 @group Paper Elements
 @element paper-radio-button
-@hero hero.svg
 @demo demo/index.html
 */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-import '@polymer/polymer/polymer-legacy.js';
+Polymer({
+  _template: template,
 
-import { PaperCheckedElementBehavior } from '@polymer/paper-behaviors/paper-checked-element-behavior.js';
-import '@polymer/paper-styles/default-theme.js';
-import '@polymer/iron-flex-layout/iron-flex-layout.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
-
-$_documentContainer.innerHTML = `<dom-module id="paper-radio-button">
-  <template strip-whitespace="">
-    <style>
-      :host {
-        display: inline-block;
-        line-height: 0;
-        white-space: nowrap;
-        cursor: pointer;
-        @apply --paper-font-common-base;
-        --calculated-paper-radio-button-size: var(--paper-radio-button-size, 16px);
-        /* -1px is a sentinel for the default and is replace in \`attached\`. */
-        --calculated-paper-radio-button-ink-size: var(--paper-radio-button-ink-size, -1px);
-      }
-
-      :host(:focus) {
-        outline: none;
-      }
-
-      #radioContainer {
-        @apply --layout-inline;
-        @apply --layout-center-center;
-        position: relative;
-        width: var(--calculated-paper-radio-button-size);
-        height: var(--calculated-paper-radio-button-size);
-        vertical-align: middle;
-
-        @apply --paper-radio-button-radio-container;
-      }
-
-      #ink {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        right: auto;
-        width: var(--calculated-paper-radio-button-ink-size);
-        height: var(--calculated-paper-radio-button-ink-size);
-        color: var(--paper-radio-button-unchecked-ink-color, var(--primary-text-color));
-        opacity: 0.6;
-        pointer-events: none;
-        -webkit-transform: translate(-50%, -50%);
-        transform: translate(-50%, -50%);
-      }
-
-      #ink[checked] {
-        color: var(--paper-radio-button-checked-ink-color, var(--primary-color));
-      }
-
-      #offRadio, #onRadio {
-        position: absolute;
-        box-sizing: border-box;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-      }
-
-      #offRadio {
-        border: 2px solid var(--paper-radio-button-unchecked-color, var(--primary-text-color));
-        background-color: var(--paper-radio-button-unchecked-background-color, transparent);
-        transition: border-color 0.28s;
-      }
-
-      #onRadio {
-        background-color: var(--paper-radio-button-checked-color, var(--primary-color));
-        -webkit-transform: scale(0);
-        transform: scale(0);
-        transition: -webkit-transform ease 0.28s;
-        transition: transform ease 0.28s;
-        will-change: transform;
-      }
-
-      :host([checked]) #offRadio {
-        border-color: var(--paper-radio-button-checked-color, var(--primary-color));
-      }
-
-      :host([checked]) #onRadio {
-        -webkit-transform: scale(0.5);
-        transform: scale(0.5);
-      }
-
-      #radioLabel {
-        line-height: normal;
-        position: relative;
-        display: inline-block;
-        vertical-align: middle;
-        margin-left: var(--paper-radio-button-label-spacing, 10px);
-        white-space: normal;
-        color: var(--paper-radio-button-label-color, var(--primary-text-color));
-
-        @apply --paper-radio-button-label;
-      }
-
-      :host([checked]) #radioLabel {
-        @apply --paper-radio-button-label-checked;
-      }
-
-      #radioLabel:dir(rtl) {
-        margin-left: 0;
-        margin-right: var(--paper-radio-button-label-spacing, 10px);
-      }
-
-      #radioLabel[hidden] {
-        display: none;
-      }
-
-      /* disabled state */
-
-      :host([disabled]) #offRadio {
-        border-color: var(--paper-radio-button-unchecked-color, var(--primary-text-color));
-        opacity: 0.5;
-      }
-
-      :host([disabled][checked]) #onRadio {
-        background-color: var(--paper-radio-button-unchecked-color, var(--primary-text-color));
-        opacity: 0.5;
-      }
-
-      :host([disabled]) #radioLabel {
-        /* slightly darker than the button, so that it's readable */
-        opacity: 0.65;
-      }
-    </style>
-
-    <div id="radioContainer">
-      <div id="offRadio"></div>
-      <div id="onRadio"></div>
-    </div>
-
-    <div id="radioLabel"><slot></slot></div>
-  </template>
-
-  
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
-Polymer({
   is: 'paper-radio-button',
@@ -207,0 +198,0 @@

README.md

@@ -0,38 +1,88 @@
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-radio-button.svg)](https://www.npmjs.com/package/@polymer/paper-radio-button)
 [![Build status](https://travis-ci.org/PolymerElements/paper-radio-button.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-radio-button)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerElements/paper-radio-button)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-radio-button)
 
 ## <paper-radio-button>
 
-Material design: [Radio button](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button)
+`paper-radio-button` is a button that can be either checked or unchecked. The
+user can tap the radio button to check or uncheck it.
 
-`paper-radio-button` is a button that can be either checked or unchecked.
-User can tap the radio button to check or uncheck it.
-
-Use a `<paper-radio-group>` to group a set of radio buttons.  When radio buttons
+Use a `<paper-radio-group>` to group a set of radio buttons. When radio buttons
 are inside a radio group, exactly one radio button in the group can be checked
 at any time.
 
-Example:
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-radio-button),
+  [Demo](https://www.webcomponents.org/element/@polymer/paper-radio-button/demo/demo/index.html).
 
+## Usage
+
+### Installation
+
+```
+npm install --save @polymer/paper-radio-button
+```
+
+### In an HTML file
+
 ```html
-<paper-radio-button></paper-radio-button>
-<paper-radio-button>Item label</paper-radio-button>
+<html>
+  <head>
+    <script type="module">
+      import '@polymer/paper-radio-button/paper-radio-button.js';
+    </script>
+  </head>
+  <body>
+    <paper-radio-button>Unchecked</paper-radio-button>
+    <paper-radio-button checked>Checked</paper-radio-button>
+    <paper-radio-button disabled>Disabled</paper-radio-button>
+  </body>
+</html>
 ```
 
-### Styling
+### In a Polymer 3 element
 
-The following custom properties and mixins are available for styling:
+```js
+import {PolymerElement} from '@polymer/polymer/polymer-element.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 
-| Custom property | Description | Default |
-| --- | --- | --- |
-| `--paper-radio-button-unchecked-background-color` | Radio button background color when the input is not checked | `transparent` |
-| `--paper-radio-button-unchecked-color` | Radio button color when the input is not checked | `--primary-text-color` |
-| `--paper-radio-button-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color` |
-| `--paper-radio-button-checked-color` | Radio button color when the input is checked | `--primary-color` |
-| `--paper-radio-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--primary-color` |
-| `--paper-radio-button-size` | Size of the radio button | `16px` |
-| `--paper-radio-button-label-color` | Label color | `--primary-text-color` |
-| `--paper-radio-button-label-spacing` | Spacing between the label and the button | `10px` |
+import '@polymer/paper-radio-button/paper-radio-button.js';
 
-This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
-In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
+class ExampleElement extends PolymerElement {
+  static get template() {
+    return html`
+      <paper-radio-button>Unchecked</paper-radio-button>
+      <paper-radio-button checked>Checked</paper-radio-button>
+      <paper-radio-button disabled>Disabled</paper-radio-button>
+    `;
+  }
+}
+
+customElements.define('example-element', ExampleElement);
+```
+
+## Contributing
+
+If you want to send a PR to this element, here are the instructions for running
+the tests and demo locally:
+
+### Installation
+
+```sh
+git clone https://github.com/PolymerElements/paper-radio-button
+cd paper-radio-button
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+
+```sh
+polymer serve --npm
+open http://127.0.0.1:<port>/demo/
+```
+
+### Running the tests
+
+```sh
+polymer test --npm
+```

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Dev dependency count

6

decreased by-25%

Lines of code

290

increased by15.54%

Number of lines in readme file

89

increased by128.21%

Worsened metrics

Total package byte prevSize

23149

decreased by-30.75%

Number of package files

8

decreased by-42.86%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@polymer/iron-checked-element-behavior@^3.0.0-pre.20

• Updated@polymer/iron-flex-layout@^3.0.0-pre.20

• Updated@polymer/paper-behaviors@^3.0.0-pre.20

• Updated@polymer/paper-styles@^3.0.0-pre.20