@anypoint-web-components/anypoint-checkbox - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

anypoint-checkbox.d.ts

@@ -1,106 +0,7 @@
-/**
- * DO NOT EDIT
- *
- * This file was automatically generated by
- *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
- *
- * To modify these typings, edit the source file(s):
- *   anypoint-checkbox.js
- */
+import { AnypointCheckbox } from './src/AnypointCheckbox';
 
-
-// tslint:disable:variable-name Describing an API that's defined elsewhere.
-// tslint:disable:no-any describes the API as best we are able today
-
-import {LitElement, html, css} from 'lit-element';
-
-import {ButtonStateMixin, ControlStateMixin} from '@anypoint-web-components/anypoint-control-mixins/anypoint-control-mixins.js';
-
-import {CheckedElementMixin} from '@anypoint-web-components/anypoint-form-mixins/anypoint-form-mixins.js';
-
-declare namespace AnypointUi {
-
-  /**
-   * `anypoint-checkbox`
-   * Anypoint styled checkbox
-   *
-   * `<anypoint-checkbox>` is a button that can be either checked or unchecked.
-   * User can tap the checkbox to check or uncheck it.  Usually you use checkboxes
-   * to allow user to select multiple options from a set.
-   * Avoid using a single checkbox as an option selector and use toggle button intead.
-   *
-   * ### Example
-   *
-   * ```html
-   * <anypoint-checkbox>label</anypoint-checkbox>
-   * <anypoint-checkbox checked>label</anypoint-checkbox>
-   * ```
-   *
-   * ### Using with forms
-   *
-   * ```
-   * npm i --save @polymer/iron-form
-   * ```
-   *
-   * ```html
-   * <script type="module">
-   * import 'node_modules/@polymer/iron-form';
-   * </script>
-   * <iron-form>
-   *  <form>
-   *    <anypoint-checkbox name="subscribe" value="newsletetr">Subsceribe to our newsletter</anypoint-checkbox>
-   *    <anypoint-checkbox name="tems" value="accepted" checked>Agree to terms and conditions</anypoint-checkbox>
-   *    <anypoint-checkbox name="disabled" value="noop" disabled>This is never included</anypoint-checkbox>
-   *  </form>
-   * </iron-form>
-   * <script>
-   * const values = document.querySelector('iron-form').serializeForm();
-   * console.log(values);
-   * </script>
-   * ```
-   *
-   * ### Styling
-   *
-   * `<anypoint-checkbox>` provides the following custom properties and mixins for styling:
-   *
-   * Custom property | Description | Default
-   * ----------------|-------------|----------
-   * `--anypoint-checkbox-input-border-bolor` | Border color of the checkbox input square | `--anypoint-color-aluminum4`
-   * `--anypoint-checkbox-label-color` | A color of the label. | ` --anypoint-color-steel1`
-   * `--anypoint-checkbox-label` | Mixin applied to the label | ``
-   * `--anypoint-checkbox-label-checked-color` | Color of checked label | `--anypoint-color-steel1`
-   * `--anypoint-checkbox-label-checked` | Mixin applie dto checked label | ``
-   * `--anypoint-checkbox-unchecked-color` | Color of a label of unchecked checkbox | `--anypoint-color-steel1`
-   * `--anypoint-checkbox-error-color` | Color of error state | `--anypoint-color-danger`
-   * `--anypoint-checkbox-label-spacing` | Spacing between the label and the checkbox | `0`
-   */
-  class AnypointCheckbox {
-    readonly form: any;
-    ariaActiveAttribute: string|null|undefined;
-    indeterminate: boolean|null|undefined;
-    formDisabled: boolean|null|undefined;
-    render(): any;
-    connectedCallback(): void;
-    _computeCheckboxClass(checked: any, invalid: any): any;
-    _computeCheckmarkClass(checked: any, indeterminate: any): any;
-
-    /**
-     * Synchronizes the element's `active` and `checked` state.
-     */
-    _buttonStateChanged(): void;
-    _clickHandler(): void;
-    _checkedChanged(value: any): void;
-    _spaceKeyDownHandler(e: any): void;
-    checkValidity(): any;
-    formDisabledCallback(disabled: any): void;
-    formResetCallback(): void;
-    formStateRestoreCallback(state: any): void;
-  }
-}
-
 declare global {
-
   interface HTMLElementTagNameMap {
-    "anypoint-checkbox": AnypointUi.AnypointCheckbox;
+    "anypoint-checkbox": AnypointCheckbox;
   }
 }

anypoint-checkbox.js

@@ -1,379 +0,3 @@
-import { LitElement, html, css } from 'lit-element';
-import {
-  ButtonStateMixin,
-  ControlStateMixin
-} from '@anypoint-web-components/anypoint-control-mixins/anypoint-control-mixins.js';
-import { CheckedElementMixin } from '@anypoint-web-components/anypoint-form-mixins/anypoint-form-mixins.js';
-/**
- * `anypoint-checkbox`
- * Anypoint styled checkbox
- *
- * `<anypoint-checkbox>` is a button that can be either checked or unchecked.
- * User can tap the checkbox to check or uncheck it.  Usually you use checkboxes
- * to allow user to select multiple options from a set.
- * Avoid using a single checkbox as an option selector and use toggle button intead.
- *
- * ### Example
- *
- * ```html
- * <anypoint-checkbox>label</anypoint-checkbox>
- * <anypoint-checkbox checked>label</anypoint-checkbox>
- * ```
- *
- * ### Using with forms
- *
- * ```
- * npm i --save @polymer/iron-form
- * ```
- *
- * ```html
- * <script type="module">
- * import 'node_modules/@polymer/iron-form';
- * </script>
- * <iron-form>
- *  <form>
- *    <anypoint-checkbox name="subscribe" value="newsletetr">Subsceribe to our newsletter</anypoint-checkbox>
- *    <anypoint-checkbox name="tems" value="accepted" checked>Agree to terms and conditions</anypoint-checkbox>
- *    <anypoint-checkbox name="disabled" value="noop" disabled>This is never included</anypoint-checkbox>
- *  </form>
- * </iron-form>
- * <script>
- * const values = document.querySelector('iron-form').serializeForm();
- * console.log(values);
- * </script>
- * ```
- *
- * ### Styling
- *
- * `<anypoint-checkbox>` provides the following custom properties and mixins for styling:
- *
- * Custom property | Description | Default
- * ----------------|-------------|----------
- * `--anypoint-checkbox-input-border-bolor` | Border color of the checkbox input square | `--anypoint-color-aluminum4`
- * `--anypoint-checkbox-label-color` | A color of the label. | ` --anypoint-color-steel1`
- * `--anypoint-checkbox-label` | Mixin applied to the label | ``
- * `--anypoint-checkbox-label-checked-color` | Color of checked label | `--anypoint-color-steel1`
- * `--anypoint-checkbox-label-checked` | Mixin applie dto checked label | ``
- * `--anypoint-checkbox-unchecked-color` | Color of a label of unchecked checkbox | `--anypoint-color-steel1`
- * `--anypoint-checkbox-error-color` | Color of error state | `--anypoint-color-danger`
- * `--anypoint-checkbox-label-spacing` | Spacing between the label and the checkbox | `0`
- *
- *
- * @customElement
- * @polymer
- * @demo demo/index.html
- * @memberof AnypointUi
- */
-class AnypointCheckbox extends ButtonStateMixin(ControlStateMixin(CheckedElementMixin(LitElement))) {
-  get styles() {
-    return css`:host {
-      display: inline-flex;
-      align-items: center;
-      white-space: nowrap;
-      cursor: pointer;
-      line-height: 0;
-      -webkit-tap-highlight-color: transparent;
-    }
+import { AnypointCheckbox } from './src/AnypointCheckbox.js';
 
-    :host([hidden]) {
-      display: none !important;
-    }
-
-    :host([disabled]),
-    :host([formdisabled]) {
-      cursor: auto;
-      pointer-events: none;
-      user-select: none;
-    }
-
-    :host(:focus) {
-      outline: none;
-    }
-
-    .hidden {
-      display: none !important;
-    }
-
-    .checkboxContainer {
-      display: inline-block;
-      position: relative;
-      vertical-align: middle;
-      padding: 12px;
-    }
-
-    .checkboxContainer:hover:before,
-      :host([focused]) .checkboxContainer:before {
-      top: 0%;
-      left: 0%;
-      width: 100%;
-      height: 100%;
-      opacity: .04;
-      background-color: var(--anypoint-checkbox-checked-color, var(--anypoint-color-primary));
-      pointer-events: none;
-      content: "";
-      border-radius: 50%;
-      position: absolute;
-    }
-
-    :host([disabled]) .checkboxContainer:before,
-    :host([formdisabled]) .checkboxContainer:before {
-      display: none;
-    }
-
-    :host([focused]) .checkboxContainer:before {
-      opacity: .12;
-    }
-
-    .checkbox {
-      position: relative;
-      box-sizing: border-box;
-      pointer-events: none;
-      border-width: 1px;
-      border-style: solid;
-      border-color: var(--anypoint-checkbox-input-border-color, var(--anypoint-color-aluminum4));
-      border-radius: 2px;
-      -webkit-transition: box-shadow .3s linear;
-      transition: box-shadow .3s linear;
-      display: inline-block;
-      vertical-align: text-top;
-      width: 20px;
-      height: 20px;
-      -webkit-transition: background-color .17s ease-out;
-      transition: background-color .17s ease-out;
-    }
-
-    .checkmark {
-      transition: top .15s ease-in-out, height .2s ease-in-out, width .3s ease-in-out;
-      will-change: top, width, height;
-      position: absolute;
-      display: block;
-      left: 4px;
-    }
-
-    :host([checked]) .checkmark {
-      border-color: var(--anypoint-checkbox-checkmark-color, var(--anypoint-color-tertiary));
-      border-style: none none solid solid;
-      border-width: 3px;
-      height: 5px;
-      top: 3px;
-      transform: rotate(-45deg);
-      width: 8px;
-      background: transparent;
-    }
-
-    .checkboxLabel {
-      position: relative;
-      display: inline-block;
-      vertical-align: middle;
-      white-space: normal;
-      line-height: normal;
-      color: var(--anypoint-checkbox-label-color, var(--anypoint-color-steel1));
-    }
-
-    :host-context([dir="rtl"]) .checkboxLabel {
-      padding-right: var(--anypoint-checkbox-label-spacing, 5px);
-      padding-left: 0;
-    }
-
-    :host([checked]) .checkbox,
-    :host(:not([checked])[indeterminate]) .checkbox {
-      background-color: var(--anypoint-checkbox-checked-color, var(--anypoint-color-primary));
-      border-color: var(--anypoint-checkbox-checked-input-border-color, var(--anypoint-color-primary));
-    }
-
-    :host(:not([checked])[indeterminate]) .checkmark {
-      background-color: var(--anypoint-checkbox-checkmark-color, var(--anypoint-color-tertiary));
-      height: 3px;
-      width: 10px;
-      top: calc(50% - 1px);
-      border: none;
-    }
-
-
-    :host([checked]) .checkboxLabel {
-      color: var(--anypoint-checkbox-label-checked-color,
-        var(--anypoint-checkbox-label-color, var(--anypoint-color-steel1)));
-    }
-
-    .checkboxLabel[hidden] {
-      display: none;
-    }
-
-    :host([disabled]) .checkbox,
-    :host([formdisabled]) .checkbox {
-      opacity: 0.5;
-      border-color: var(--anypoint-checkbox-unchecked-color,
-        var(--anypoint-checkbox-label-color, var(--anypoint-color-steel1)));
-    }
-
-    :host([disabled][checked]) .checkbox,
-    :host([formdisabled][checked]) .checkbox {
-      background-color: var(--anypoint-checkbox-unchecked-color,
-        var(--anypoint-checkbox-label-color, var(--anypoint-color-steel1)));
-      opacity: 0.5;
-    }
-
-    :host([disabled]) .checkboxLabel,
-    :host([formdisabled]) .checkboxLabel {
-      opacity: 0.65;
-    }
-
-    /* invalid state */
-    .checkbox.invalid:not(.checked),
-    :host(:invalid) .checkbox {
-      border-color: var(--anypoint-checkbox-error-color, var(--anypoint-color-danger));
-    }`;
-  }
-
-  render() {
-    const { checked, invalid, indeterminate } = this;
-    return html`<style>${this.styles}</style>
-      <div class="checkboxContainer">
-        <div class="checkbox ${this._computeCheckboxClass(checked, invalid)}">
-          <div class="checkmark ${this._computeCheckmarkClass(checked, indeterminate)}"></div>
-        </div>
-      </div>
-      <label class="checkboxLabel"><slot></slot></label>`;
-  }
-
-  static get formAssociated() {
-    return true;
-  }
-
-  get form() {
-    return this._internals && this._internals.form;
-  }
-
-  static get properties() {
-    return {
-      ariaActiveAttribute: { type: String },
-
-      indeterminate: { type: Boolean, reflect: true },
-
-      formDisabled: { type: Boolean, reflect: true }
-    };
-  }
-
-  constructor() {
-    super();
-    this.ariaActiveAttribute = 'aria-checked';
-    this.checked = false;
-    /* to work with iron-form */
-    this._hasIronCheckedElementBehavior = true;
-    if (this.attachInternals) {
-      this._internals = this.attachInternals();
-    }
-  }
-
-  connectedCallback() {
-    // button state mixin sets role to checkbox
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'checkbox');
-    }
-    if (super.connectedCallback) {
-      super.connectedCallback();
-    }
-    if (!this.hasAttribute('aria-checked')) {
-      this.setAttribute('aria-checked', 'false');
-    }
-    if (!this.hasAttribute('tabindex')) {
-      this.setAttribute('tabindex', '0');
-    }
-  }
-
-  _computeCheckboxClass(checked, invalid) {
-    let className = '';
-    if (checked) {
-      className += 'checked ';
-    }
-    if (invalid) {
-      className += 'invalid';
-    }
-    return className.trim();
-  }
-
-  _computeCheckmarkClass(checked, indeterminate) {
-    if (!checked && indeterminate) {
-      return '';
-    }
-    return checked ? '' : 'hidden';
-  }
-  /**
-   * Synchronizes the element's `active` and `checked` state.
-   */
-  _buttonStateChanged() {
-    if (this.disabled || this.indeterminate) {
-      return;
-    }
-    this.checked = this.active;
-  }
-
-  _clickHandler() {
-    if (this.disabled) {
-      return;
-    }
-    if (this.indeterminate) {
-      this.indeterminate = false;
-    }
-    this.active = !this.active;
-  }
-
-  _checkedChanged(value) {
-    super._checkedChanged(value);
-    if (this.indeterminate) {
-      this.indeterminate = false;
-    }
-    this.setAttribute('aria-checked', value ? 'true' : 'false');
-    if (this._internals) {
-      this._internals.setFormValue(value ? this.value : '');
-
-      if (!this.matches(':disabled') && this.hasAttribute('required') && !value) {
-        this._internals.setValidity({
-          customError: true
-        }, 'This field is required.');
-      } else {
-        this._internals.setValidity({});
-      }
-    } else {
-      this.validate();
-    }
-  }
-
-  _spaceKeyDownHandler(e) {
-    if (this.indeterminate) {
-      this.indeterminate = false;
-    }
-    super._spaceKeyDownHandler(e);
-  }
-
-  checkValidity() {
-    return this._internals ? this._internals.checkValidity() :
-      this.required ? this.checked : true;
-  }
-
-  formDisabledCallback(disabled) {
-    this.formDisabled = disabled;
-  }
-
-  formResetCallback() {
-    this.checked = false;
-    this._internals.setFormValue('');
-  }
-
-  formStateRestoreCallback(state) {
-    this._internals.setFormValue(state);
-    this.checked = !!state;
-  }
-  /**
-   * Fired when the checked state changes due to user interaction.
-   *
-   * @event change
-   */
-  /**
-   * Fired when the checked state changes.
-   *
-   * @event iron-change
-   */
-}
-
 window.customElements.define('anypoint-checkbox', AnypointCheckbox);

package.json

 {
   "name": "@anypoint-web-components/anypoint-checkbox",
   "description": "Anypoint styled checkbox",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "license": "Apache-2.0",
@@ -30,49 +30,74 @@ "main": "anypoint-checkbox.js",
   "dependencies": {
-    "@anypoint-web-components/anypoint-control-mixins": "^1.0.2",
-    "@anypoint-web-components/anypoint-form-mixins": "^1.0.1",
-    "lit-element": "^2.2.1"
+    "@anypoint-web-components/anypoint-control-mixins": "^1.1.1",
+    "@anypoint-web-components/anypoint-form-mixins": "^1.2.0",
+    "lit-element": "^2.3.1"
   },
   "devDependencies": {
-    "@advanced-rest-client/arc-demo-helper": "^1.0.16",
-    "@advanced-rest-client/eslint-config": "^1.1.3",
-    "@advanced-rest-client/prettier-config": "^0.1.0",
-    "@advanced-rest-client/testing-karma-sl": "^1.1.0",
+    "@advanced-rest-client/arc-demo-helper": "^1.0.17",
+    "@advanced-rest-client/testing-karma-sl": "^1.3.1",
     "@anypoint-web-components/anypoint-radio-button": "^0.1.4",
     "@anypoint-web-components/anypoint-styles": "^1.0.1",
-    "@commitlint/cli": "^8.2.0",
-    "@commitlint/config-conventional": "^8.2.0",
-    "@open-wc/testing": "^2.3.9",
-    "@open-wc/testing-karma": "^3.2.1",
-    "@polymer/gen-typescript-declarations": "^1.6.1",
+    "@open-wc/eslint-config": "^2.0.0",
+    "@open-wc/testing": "^2.5.17",
+    "@open-wc/testing-karma": "^3.4.1",
     "@polymer/iron-form": "^3.0.1",
     "@polymer/iron-test-helpers": "^3.0.1",
     "deepmerge": "^4.2.2",
-    "es-dev-server": "^1.24.1",
-    "husky": "^3.1.0",
-    "karma": "^4.4.1",
-    "lint-staged": "^9.4.3",
-    "sinon": "^7.5.0"
+    "es-dev-server": "^1.54.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.11.0",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.2",
+    "prettier": "^2.0.5",
+    "sinon": "^9.0.2",
+    "typescript": "^3.9.2",
+    "typescript-lit-html-plugin": "^0.9.0"
   },
   "scripts": {
-    "test": "karma start --coverage",
-    "update-types": "gen-typescript-declarations --deleteExisting --outDir . --verify",
     "start": "es-dev-server --app-index demo/index.html --node-resolve --open --watch",
-    "start:compatibility": "es-dev-server --app-index demo/index.html --compatibility all --node-resolve --open --watch",
-    "lint:eslint": "eslint --ext .js,.html .",
-    "format:eslint": "eslint --ext .js,.html . --fix",
-    "lint:prettier": "prettier \"**/*.js\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
-    "format:prettier": "prettier \"**/*.js\" --write",
+    "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
+    "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
+    "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
+    "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore",
+    "lint:types": "tsc",
     "lint": "npm run lint:eslint && npm run lint:prettier",
     "format": "npm run format:eslint && npm run format:prettier",
+    "test": "karma start --coverage",
     "test:watch": "karma start --auto-watch=true --single-run=false",
-    "test:legacy": "karma start --compatibility all --coverage",
-    "test:legacy:watch": "karma start --compatibility all --auto-watch=true --single-run=false",
-    "test:sl": "karma start karma.sl.config.js --compatibility all --coverage"
+    "test:sl": "karma start karma.sl.config.js --compatibility auto --coverage"
   },
+  "eslintConfig": {
+    "extends": [
+      "@open-wc/eslint-config",
+      "eslint-config-prettier"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/demo/**/*.js",
+          "**/demo/**/*.html"
+        ],
+        "rules": {
+          "no-console": "off",
+          "no-unused-expressions": "off",
+          "class-methods-use-this": "off",
+          "import/no-extraneous-dependencies": "off"
+        }
+      }
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "always"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
   "lint-staged": {
     "*.js": [
-      "eslint --fix",
-      "git add"
+      "eslint --fix"
     ]
   }
 }

README.md

@@ -1,2 +0,2 @@
-[![Build Status](https://travis-ci.org/anypoint-web-components/anypoint-checkbox.svg?branch=master)](https://travis-ci.org/anypoint-web-components/anypoint-checkbox)
+[![Build Status](https://travis-ci.com/anypoint-web-components/anypoint-checkbox.svg)](https://travis-ci.com/anypoint-web-components/anypoint-checkbox)
 
@@ -95,3 +95,3 @@ [![Published on NPM](https://img.shields.io/npm/v/@anypoint-web-components/anypoint-checkbox.svg)](https://www.npmjs.com/package/@anypoint-web-components/anypoint-checkbox)
 
-### Development
+## Development
 
@@ -98,0 +98,0 @@ ```sh

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Number of package files

11

increased by22.22%

Worsened metrics

Total package byte prevSize

20935

decreased by-3.1%

Lines of code

380

decreased by-13.24%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@anypoint-web-components/anypoint-control-mixins@^1.1.1

• Updated@anypoint-web-components/anypoint-form-mixins@^1.2.0

• Updatedlit-element@^2.3.1