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

Comparing version 1.2.2 to 1.2.3

custom-elements.json

@@ -139,2 +139,6 @@ {
         {
+          "name": "transitionend",
+          "description": "Above the standard HTML behavior, it is dispatched when ripple finish animation."
+        },
+        {
           "name": "focusedchange",
@@ -141,0 +145,0 @@ "description": "When the `focused` property has changed"

package.json

 {
   "name": "@anypoint-web-components/anypoint-button",
   "description": "Anypoint styled button.",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "license": "Apache-2.0",
@@ -30,3 +30,3 @@ "main": "index.js",
     "@anypoint-web-components/anypoint-control-mixins": "^1.2.0",
-    "@anypoint-web-components/material-ripple": "^1.0.1",
+    "@anypoint-web-components/material-ripple": "^1.0.2",
     "lit-element": "^2.5.1"
@@ -36,5 +36,5 @@ },
     "@advanced-rest-client/arc-demo-helper": "^1.0.17",
-    "@anypoint-web-components/anypoint-checkbox": "^1.2.1",
+    "@anypoint-web-components/anypoint-checkbox": "^1.2.2",
     "@anypoint-web-components/anypoint-icons": "^1.0.1",
-    "@anypoint-web-components/anypoint-styles": "^1.0.1",
+    "@anypoint-web-components/anypoint-styles": "^1.0.2",
     "@open-wc/eslint-config": "^4.3.0",
@@ -45,11 +45,11 @@ "@open-wc/testing": "^2.5.33",
     "@polymer/iron-test-helpers": "^3.0.1",
-    "@web/dev-server": "^0.1.18",
-    "@web/test-runner": "^0.13.13",
-    "@web/test-runner-playwright": "^0.8.6",
-    "eslint": "^7.30.0",
+    "@web/dev-server": "^0.1.22",
+    "@web/test-runner": "^0.13.17",
+    "@web/test-runner-playwright": "^0.8.8",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "husky": "^7.0.1",
-    "lint-staged": "^11.0.0",
-    "sinon": "^11.1.1",
-    "typescript": "^4.3.5",
+    "husky": "^7.0.2",
+    "lint-staged": "^11.1.2",
+    "sinon": "^11.1.2",
+    "typescript": "^4.4.2",
     "typescript-lit-html-plugin": "^0.9.0"
@@ -72,2 +72,19 @@ },
       "eslint-config-prettier"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "demo/**/*.js",
+          "test/**/*.js",
+          "**/demo/**/*.html"
+        ],
+        "rules": {
+          "no-console": "off",
+          "no-unused-expressions": "off",
+          "no-plusplus": "off",
+          "no-param-reassing": "off",
+          "class-methods-use-this": "off",
+          "import/no-extraneous-dependencies": "off"
+        }
+      }
     ]
@@ -84,3 +101,9 @@ },
     ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "always",
+    "printWidth": 240,
+    "trailingComma": "all"
   }
 }

src/AnypointButton.d.ts

@@ -7,2 +7,3 @@ import { TemplateResult } from 'lit-element';
  * Material design and Anypoint styled button.
+ * @fires transitionend Above the standard HTML behavior, it is dispatched when ripple finish animation.
  */
@@ -9,0 +10,0 @@ export declare class AnypointButton extends AnypointButtonBase {

src/AnypointButton.js

@@ -23,3 +23,3 @@ import { html } from 'lit-element';
     const stopRipple = !!noink || !!compatibility;
-    return html`<style>${styles}</style><slot></slot><material-ripple .noink="${stopRipple}"></material-ripple>`;
+    return html`<style>${styles}</style><slot></slot><material-ripple .noink="${stopRipple}" @transitionend="${this._transitionEndHandler}"></material-ripple>`;
   }
@@ -26,0 +26,0 @@

src/AnypointButtonBase.d.ts

@@ -57,2 +57,8 @@ import { LitElement } from 'lit-element';
   _buttonStateChanged(): void;
+  /**
+   * Redirects the `transitionend` from the `material-ripple` element.
+   * This is the only way to perform an action when the animation ends instead of counting on `click`.
+   * Note, when compatibility is enabled this event is not dispatched.
+   */
+  _transitionEndHandler(e: TransitionEvent): void;
 }

src/AnypointButtonBase.js

@@ -129,2 +129,19 @@ import { LitElement } from 'lit-element';
   }
+
+  /**
+   * Redirects the `transitionend` from the `material-ripple` element.
+   * This is the only way to perform an action when the animation ends instead of counting on `click`.
+   * Note, when compatibility is enabled this event is not dispatched.
+   * 
+   * @param {TransitionEvent} e 
+   */
+  _transitionEndHandler(e) {
+    const { propertyName } = e;
+    if (propertyName !== undefined) {
+      // the material-ripple dispatches `transitionend` as a custom event
+      // which has no propertyName on it.
+      return;
+    }
+    this.dispatchEvent(new Event('transitionend'));
+  }
 }

src/AnypointIconButton.d.ts

@@ -9,2 +9,3 @@ import { TemplateResult } from 'lit-element';
  * Material design and Anypoint styled icon button
+ * @fires transitionend Above the standard HTML behavior, it is dispatched when ripple finish animation.
  */
@@ -11,0 +12,0 @@ declare class AnypointIconButton extends AnypointButtonBase {

src/AnypointIconButton.js

@@ -38,7 +38,3 @@ import { html } from 'lit-element';
       <slot></slot>
-      <material-ripple
-        class="circle"
-        center
-        .noink="${this.noink}"
-      ></material-ripple>
+      <material-ripple class="circle" center .noink="${this.noink}" @transitionend="${this._transitionEndHandler}"></material-ripple>
     </div> `;
@@ -45,0 +41,0 @@ }

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

41592

increased by4.73%

Lines of code

1016

increased by2.42%

Dependency changes

• Updated@anypoint-web-components/material-ripple@^1.0.2