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

Comparing version 1.0.8 to 1.0.9

package.json

 {
   "name": "@anypoint-web-components/anypoint-button",
   "description": "Anypoint styled button.",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "license": "Apache-2.0",
@@ -6,0 +6,0 @@ "main": "anypoint-button.js",

src/AnypointButton.js

@@ -51,3 +51,3 @@ import { html, css } from 'lit-element';
 
-    :host([emphasis="low"]:not([legacy])) {
+    :host([emphasis="low"]:not([compatibility])) {
       box-shadow: none !important;
@@ -64,3 +64,3 @@ }
 
-    :host(:not([pressed]):not([legacy])[emphasis="low"][focused]) {
+    :host(:not([pressed]):not([compatibility])[emphasis="low"][focused]) {
       background-color: var(--anypoint-button-emphasis-low-focus-background-color, rgba(0, 162, 223, .12));
@@ -74,3 +74,3 @@ color: var(--anypoint-button-emphasis-low-focus-color, var(--anypoint-color-coreBlue4));
 
-    :host([emphasis="medium"]:not([legacy])) {
+    :host([emphasis="medium"]:not([compatibility])) {
       box-shadow: none !important;
@@ -102,3 +102,3 @@ }
 
-    :host([emphasis="high"]:not([legacy])) {
+    :host([emphasis="high"]:not([compatibility])) {
       will-change: box-shadow;
@@ -109,3 +109,3 @@ background-color: var(--anypoint-button-emphasis-high-background-color, var(--anypoint-color-primary));
 
-    :host([emphasis="high"][disabled]:not([legacy])) {
+    :host([emphasis="high"][disabled]:not([compatibility])) {
       background: var(--anypoint-button-disabled-background-color, #eaeaea);
@@ -116,11 +116,11 @@ color: var(--anypoint-button-disabled-color, #a8a8a8);
 
-    :host(:not([pressed]):not([legacy])[emphasis="high"]:hover) {
+    :host(:not([pressed]):not([compatibility])[emphasis="high"]:hover) {
       background-color: var(--anypoint-button-emphasis-high-hover-background-color, rgba(0, 162, 223, 0.87));
     }
 
-    :host(:not([pressed]):not([legacy])[emphasis="high"]:focus) {
+    :host(:not([pressed]):not([compatibility])[emphasis="high"]:focus) {
       background-color: var(--anypoint-button-emphasis-high-focus-background-color, rgba(0, 162, 223, 0.87));
     }
 
-    :host(:not([pressed]):not([legacy])[emphasis="high"][active]) {
+    :host(:not([pressed]):not([compatibility])[emphasis="high"][active]) {
       background-color: var(--anypoint-button-emphasis-high-active-background-color, var(--anypoint-color-indigo3));
@@ -147,3 +147,3 @@ }
 
-    :host([emphasis="high"][legacy]) {
+    :host([emphasis="high"][compatibility]) {
       background-color: var(--anypoint-button-background-color, var(--anypoint-color-primary));
@@ -156,23 +156,23 @@ color: var(--anypoint-button-color, var(--anypoint-color-tertiary));
 
-    :host([emphasis="high"][legacy]:hover) {
+    :host([emphasis="high"][compatibility]:hover) {
       background-color: var(--anypoint-button-hover-background-color, var(--anypoint-color-coreBlue4));
     }
 
-    :host([legacy][focused]) {
+    :host([compatibility][focused]) {
       box-shadow: var(--anypoint-button-foxus-box-shadow-color, 0 0 0 3px #abe2f5);
     }
 
-    :host([emphasis="high"][legacy][pressed]) {
+    :host([emphasis="high"][compatibility][pressed]) {
       background-color: var(--anypoint-button-hover-background-color, var(--anypoint-color-coreBlue5));
     }
 
-    :host([emphasis="high"][legacy][active]) {
+    :host([emphasis="high"][compatibility][active]) {
       background-color: var(--anypoint-button-active-background-color, var(--anypoint-color-coreBlue5));
     }
 
-    :host([legacy]) paper-ripple {
+    :host([compatibility]) paper-ripple {
       display: none;
     }
 
-    :host([legacy][disabled]) {
+    :host([compatibility][disabled]) {
       background: var(--anypoint-button-disabled-background-color, #eaeaea);
@@ -189,4 +189,4 @@ color: var(--anypoint-button-disabled-color, #a8a8a8);
   render() {
-    const { noink, legacy } = this;
-    const stopRipple = !!noink || !!legacy;
+    const { noink, compatibility } = this;
+    const stopRipple = !!noink || !!compatibility;
     return html`<slot></slot><paper-ripple .noink="${stopRipple}"></paper-ripple>`;
@@ -193,0 +193,0 @@ }

src/AnypointButtonBase.js

@@ -39,8 +39,20 @@ import { LitElement } from 'lit-element';
       /**
-       * Renders the button as a Anypoint styled button.
+       * @deprecated Use `compatibility` instead
        */
-      legacy: { type: Boolean, reflect: true }
+      legacy: { type: Boolean },
+      /**
+       * Enables compatibility with Anypoint components.
+       */
+      compatibility: { type: Boolean, reflect: true }
     };
   }
 
+  get legacy() {
+    return this._compatibility;
+  }
+
+  set legacy(value) {
+    this.compatibility = value;
+  }
+
   get emphasis() {
@@ -66,8 +78,8 @@ return this._emphasis;
 
-  get legacy() {
-    return this._legacy;
+  get compatibility() {
+    return this._compatibility;
   }
 
-  set legacy(value) {
-    if (this._setChanged('legacy', value)) {
+  set compatibility(value) {
+    if (this._setChanged('compatibility', value)) {
       this._calculateElevation();
@@ -95,3 +107,3 @@ }
     let e = 0;
-    if (this.emphasis === 'high' && !this.legacy) {
+    if (this.emphasis === 'high' && !this.compatibility) {
       if (this.toggles && this.active) {
@@ -98,0 +110,0 @@ e = 2;

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

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

Improved metrics

Total package byte prevSize

26314

increased by1.45%

Lines of code

601

increased by1.69%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes