@power-elements/stripe-elements - npm Package Compare versions

Comparing version 2.3.8 to 2.3.9

CHANGELOG.md

@@ -0,1 +1,9 @@
+## [2.3.9](https://github.com/bennypowers/stripe-elements/compare/v2.3.8...v2.3.9) (2021-08-31)
+
+
+### Bug Fixes
+
+* don't import types from wc polyfill ([8a8f192](https://github.com/bennypowers/stripe-elements/commit/8a8f19215efd17fe20e765ea9e4bbfa41993b05c))
+* provide request shipping option ([6f99772](https://github.com/bennypowers/stripe-elements/commit/6f997720194857597fe506634998323af232bd3d))
+
 ## [2.3.8](https://github.com/bennypowers/stripe-elements/compare/v2.3.7...v2.3.8) (2020-12-30)
@@ -2,0 +10,0 @@

global.d.ts

 declare module '*/stripe-elements.css' {
-  import { CSSResult } from 'lit-element';
+  import { CSSResult } from 'lit';
   const css: CSSResult;
@@ -8,3 +8,3 @@ export default css;
 declare module '*/stripe-payment-request.css' {
-  import { CSSResult } from 'lit-element';
+  import { CSSResult } from 'lit';
   const css: CSSResult;
@@ -15,5 +15,5 @@ export default css;
 declare module '*/shared.css' {
-  import { CSSResult } from 'lit-element';
+  import { CSSResult } from 'lit';
   const css: CSSResult;
   export default css;
 }

index.d.ts

@@ -1,2 +0,2 @@
-export { StripeElements } from './stripe-elements';
-export { StripePaymentRequest } from './stripe-payment-request';
+export { StripeElements } from './stripe-elements.js';
+export { StripePaymentRequest } from './stripe-payment-request.js';

index.js

@@ -1,6 +0,8 @@
-import 'lit-element';
+export { StripeElements } from './stripe-elements.js';
+export { StripePaymentRequest } from './stripe-payment-request.js';
+import 'lit/decorators.js';
 import './shared.js';
-import '@morbidick/lit-element-notify';
-import 'lit-html/directives/if-defined';
-import 'lit-html';
+import 'lit';
+import 'lit/directive.js';
+import 'lit/directives/if-defined.js';
 import '@typed/curry';
@@ -10,4 +12,2 @@ import '@lavadrop/kebab-case';
 import '@pacote/memoize';
-export { StripeElements } from './stripe-elements.js';
-export { StripePaymentRequest } from './stripe-payment-request.js';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@power-elements/stripe-elements",
-  "version": "2.3.8",
+  "version": "2.3.9",
   "description": "Web Component wrapper for stripe elements",
+  "type": "module",
   "main": "index.js",
   "module": "index.js",
+  "customElements": "custom-elements.json",
   "directories": {
@@ -30,7 +32,6 @@ "test": "test"
     "build:rollup": "rollup -c",
-    "build:analyze:json": "wca analyze src/*.ts --outFile custom-elements.json",
-    "build:analyze:markdown": "cp src/README.template.md README.md && wca analyze src/*.ts --silent --markdown.headerLevel 3 >> README.md",
+    "build:analyze": "cem analyze --litelement",
     "clean": "run-s clean:*",
     "clean:src": "rimraf '{src,test}/**/!(global).{js,js.map,d.ts}'",
-    "clean:index": "rimraf './!(rollup.config).{js,js.map,d.ts}'",
+    "clean:index": "rimraf './!(rollup.config|web-*).{js,js.map,d.ts}'",
     "lint": "eslint src/**/*.ts",
@@ -40,6 +41,5 @@ "test": "wtr --coverage",
     "site:build": "npm run storybook:build",
-    "storybook": "npm run build && run-p storybook:watch:*",
-    "storybook:watch:build": "run-p watch:*",
-    "storybook:watch:sb": "start-storybook --docs --watch",
+    "storybook": "run-s build storybook:start",
     "storybook:build": "build-storybook",
+    "storybook:start": "web-dev-server",
     "update": "npm-check -u",
@@ -80,35 +80,40 @@ "watch": "run-p watch:*",
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-decorators": "^7.12.12",
-    "@babel/plugin-proposal-dynamic-import": "^7.8.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
-    "@babel/plugin-proposal-private-methods": "^7.12.1",
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-decorators": "^7.14.5",
+    "@babel/plugin-proposal-dynamic-import": "^7.14.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/plugin-proposal-private-methods": "^7.14.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.0",
-    "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@material/mwc-button": "^0.20.0",
-    "@material/mwc-textfield": "^0.20.0",
-    "@open-wc/demoing-storybook": "^2.1.1",
-    "@open-wc/lit-helpers": "^0.3.11",
-    "@open-wc/testing": "^2.5.32",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@material/mwc-button": "^0.22.1",
+    "@material/mwc-textfield": "^0.22.1",
+    "@open-wc/lit-helpers": "^0.3.12",
+    "@open-wc/testing": "^2.5.33",
     "@open-wc/testing-karma": "^4.0.9",
-    "@power-elements/codesandbox-button": "^0.0.8",
+    "@power-elements/codesandbox-button": "^0.1.0",
     "@power-elements/json-viewer": "^2.1.1",
-    "@pwrs/eslint-config": "^0.0.20",
+    "@pwrs/eslint-config": "^0.0.22",
     "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.0.1",
-    "@rollup/plugin-typescript": "^8.1.0",
-    "@types/karma": "^5.0.1",
+    "@rollup/plugin-typescript": "^8.2.5",
+    "@types/credit-card-type": "^9.0.0",
+    "@types/karma": "^6.3.1",
+    "@types/sinon": "^10.0.2",
     "@web/dev-server-esbuild": "^0.2.10",
+    "@web/dev-server-storybook": "^0.3.8",
+    "@web/storybook-prebuilt": "^0.1.26-alpha.0",
     "@web/test-runner": "^0.11.7",
     "babel-eslint": "^10.1.0",
-    "babel-plugin-const-enum": "^1.0.1",
-    "bind-decorator": "^1.0.11",
-    "bound-decorator": "^1.1.0",
+    "babel-plugin-const-enum": "^1.1.0",
+    "cem-plugin-module-file-extensions": "^0.0.1",
+    "cem-plugin-readme": "^0.1.4",
     "chai-things": "^0.2.0",
-    "credit-card-type": "^8.3.0",
+    "credit-card-type": "^9.1.0",
     "crocks": "^0.12.4",
     "deepmerge": "^4.2.2",
-    "eslint": "^7.16.0",
+    "eslint": "^7.32.0",
     "husky": "^4.3.6",
@@ -118,11 +123,12 @@ "luhn-js": "^1.1.2",
     "npm-run-all": "^4.1.5",
-    "query-selector-shadow-dom": "^0.8.0",
-    "rollup": "^2.7.2",
+    "query-selector-shadow-dom": "^1.0.0",
+    "rollup": "^2.56.3",
     "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-copy": "^3.3.0",
-    "rollup-plugin-lit-css": "^2.1.0",
-    "sinon": "^9.2.2",
-    "sinon-chai": "^3.5.0",
-    "stylelint-config-standard": "^20.0.0",
-    "typescript": "^4.1.3",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-lit-css": "^3.0.2",
+    "sinon": "^11.1.2",
+    "sinon-chai": "^3.7.0",
+    "stylelint-config-standard": "^22.0.0",
+    "systemjs": "^6.10.3",
+    "typescript": "^4.4.2",
     "typescript-lit-html-plugin": "^0.9.0",
@@ -132,14 +138,14 @@ "web-component-analyzer": "^1.1.6"
   "dependencies": {
-    "@babel/runtime": "^7.12.5",
+    "@babel/runtime": "^7.15.3",
     "@lavadrop/camel-case": "^0.4.0",
     "@lavadrop/kebab-case": "^3.0.0",
     "@lavadrop/pick": "^0.8.0",
-    "@morbidick/lit-element-notify": "^1.1.1",
-    "@pacote/memoize": "^1.1.5",
+    "@morbidick/lit-element-notify": "1.1.1",
+    "@pacote/memoize": "^1.1.6",
     "@typed/curry": "^1.0.1",
-    "@types/stripe-v3": "^3.1.23",
-    "lit-element": "^2.4.0",
-    "patch-package": "^6.2.2",
-    "tslib": "^2.0.3"
+    "@types/stripe-v3": "^3.1.25",
+    "lit": "^2.0.0-rc.3",
+    "patch-package": "^6.4.7",
+    "tslib": "^2.3.1"
   }
 }

rollup.config.js

@@ -7,8 +7,6 @@ import commonjs from '@rollup/plugin-commonjs';
 
-const deps = Object.keys(pkg.dependencies);
-const external = id =>
-  id !== '@morbidick/lit-element-notify' &&
-  id.startsWith('lit-html') ||
-  id.startsWith('@babel/runtime') ||
-  deps.includes(id);
+// TODO: remove after https://github.com/morbidick/lit-element-notify/issues/30
+const d = { ...pkg.dependencies };
+delete d['@morbidick/lit-element-notify'];
+const deps = Object.keys(d);
 
@@ -21,3 +19,3 @@ export default {
   ],
-  external,
+  external: id => deps.some(dep => id.startsWith(dep)),
   output: {
@@ -24,0 +22,0 @@ dir: '.',

shared.js

@@ -1,5 +0,5 @@
-import { LitElement, html, property, css } from 'lit-element';
-import { LitNotify } from '@morbidick/lit-element-notify';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { render } from 'lit-html';
+import { render, html, LitElement, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import 'lit/directive.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { curry } from '@typed/curry';
@@ -10,23 +10,14 @@ import eagerDash from '@lavadrop/kebab-case';
 
-var constants;
-(function (constants) {
-    constants.typeOfFunction = 'function';
-    constants.boolTrue = true;
-})(constants || (constants = {}));
-function bind(target, propertyKey, descriptor) {
-    if (!descriptor || (typeof descriptor.value !== constants.typeOfFunction)) {
-        throw new TypeError("Only methods can be decorated with @bind. <" + propertyKey + "> is not a method!");
-    }
+const configurable = true;
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+function bound(_, key, descriptor) {
+    if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) !== 'function')
+        throw new TypeError(`Only methods can be decorated with @bound. <${key !== null && key !== void 0 ? key : _.name}> is not a method!`); /* c8 ignore next */
     return {
-        configurable: constants.boolTrue,
-        get: function () {
-            var bound = descriptor.value.bind(this);
-            // Credits to https://github.com/andreypopp/autobind-decorator for memoizing the result of bind against a symbol on the instance.
-            Object.defineProperty(this, propertyKey, {
-                value: bound,
-                configurable: constants.boolTrue,
-                writable: constants.boolTrue
-            });
-            return bound;
-        }
+        configurable,
+        get() {
+            const value = descriptor.value.bind(this);
+            Object.defineProperty(this, key, { value, configurable, writable: true });
+            return value;
+        },
     };
@@ -36,4 +27,44 @@ }
 /**
+ * Returns the event name for the given property.
+ * @param  {string}                       name    property name
+ * @param  {PropertyDeclaration} options property declaration
+ * @return                                event name to fire
+ */
+function eventNameForProperty(name, { notify, attribute } = {}) {
+    if (notify && typeof notify === 'string') {
+        return notify;
+    } else if (attribute && typeof attribute === 'string') {
+        return `${attribute}-changed`;
+    } else {
+        return `${name.toLowerCase()}-changed`;
+    }
+}
+
+// eslint-disable-next-line valid-jsdoc
+/**
  * Enables the nofity option for properties to fire change notification events
+ *
+ * @template TBase
+ * @param {Constructor<TBase>} baseElement
  */
+const LitNotify = (baseElement) => class NotifyingElement extends baseElement {
+    /**
+     * check for changed properties with notify option and fire the events
+     */
+    update(changedProps) {
+        super.update(changedProps);
+
+        for (const prop of changedProps.keys()) {
+            const declaration = this.constructor.elementProperties.get(prop);
+            if (!declaration || !declaration.notify) continue;
+            const type = eventNameForProperty(prop, declaration);
+            const value = this[prop];
+            this.dispatchEvent(new CustomEvent(type, { detail: { value } }));
+        }
+    }
+};
+
+/**
+ * Enables the nofity option for properties to fire change notification events
+ */
 function ReadOnlyPropertiesMixin(superclass) {
@@ -111,3 +142,3 @@ const _readOnlyPropertyNamesMap = new Map();
 /** camelCase a string */
-const camel = memoize(identity, eagerCamel);
+memoize(identity, eagerCamel);
 /** dash-case a string */
@@ -627,3 +658,3 @@ const dash = memoize(identity, eagerDash);
 __decorate([
-    bind,
+    bound,
     __metadata("design:type", Function),
@@ -634,3 +665,3 @@ __metadata("design:paramtypes", [Object]),
 __decorate([
-    bind,
+    bound,
     __metadata("design:type", Function),
@@ -641,3 +672,3 @@ __metadata("design:paramtypes", []),
 __decorate([
-    bind,
+    bound,
     __metadata("design:type", Function),
@@ -648,3 +679,3 @@ __metadata("design:paramtypes", []),
 __decorate([
-    bind,
+    bound,
     __metadata("design:type", Function),
@@ -655,3 +686,3 @@ __metadata("design:paramtypes", [Object]),
 __decorate([
-    bind,
+    bound,
     __metadata("design:type", Function),
@@ -662,3 +693,3 @@ __metadata("design:paramtypes", [String]),
 
-var sharedStyles = css`[hidden] {
+const styles = css`[hidden] {
   display: none !important;
@@ -680,3 +711,3 @@ }
 
-export { StripeBase as S, bind as b, dash as d, sharedStyles as s };
+export { StripeBase as S, bound as b, dash as d, styles as s };
 //# sourceMappingURL=shared.js.map

src/global.d.ts

 declare module '*/stripe-elements.css' {
-  import { CSSResult } from 'lit-element';
+  import { CSSResult } from 'lit';
   const css: CSSResult;
@@ -8,3 +8,3 @@ export default css;
 declare module '*/stripe-payment-request.css' {
-  import { CSSResult } from 'lit-element';
+  import { CSSResult } from 'lit';
   const css: CSSResult;
@@ -15,5 +15,5 @@ export default css;
 declare module '*/shared.css' {
-  import { CSSResult } from 'lit-element';
+  import { CSSResult } from 'lit';
   const css: CSSResult;
   export default css;
 }

src/index.d.ts

@@ -1,2 +0,2 @@
-export { StripeElements } from './stripe-elements';
-export { StripePaymentRequest } from './stripe-payment-request';
+export { StripeElements } from './stripe-elements.js';
+export { StripePaymentRequest } from './stripe-payment-request.js';

src/index.js

@@ -1,3 +0,3 @@
-export { StripeElements } from './stripe-elements';
-export { StripePaymentRequest } from './stripe-payment-request';
+export { StripeElements } from './stripe-elements.js';
+export { StripePaymentRequest } from './stripe-payment-request.js';
 //# sourceMappingURL=index.js.map

src/index.ts

@@ -1,2 +0,2 @@
-export { StripeElements } from './stripe-elements';
-export { StripePaymentRequest } from './stripe-payment-request';
+export { StripeElements } from './stripe-elements.js';
+export { StripePaymentRequest } from './stripe-payment-request.js';

src/lib/dom.d.ts

@@ -1,2 +0,2 @@
-import type { TemplateResult } from 'lit-element';
+import type { TemplateResult } from 'lit';
 /**
@@ -7,2 +7,2 @@ * Remove an element from the DOM
 export declare const remove: (el: ChildNode) => void;
-export declare const appendTemplate: import("@typed/curry").Curry2<TemplateResult, Node, Element>;
+export declare const appendTemplate: import("@typed/curry").Curry2<TemplateResult<2 | 1>, Node, Element>;

src/lib/dom.js

 import { curry } from '@typed/curry';
-import { render } from 'lit-html';
+import { render } from 'lit';
 /**
@@ -4,0 +4,0 @@ * Remove an element from the DOM

src/lib/dom.ts

 import { curry } from '@typed/curry';
-import { render } from 'lit-html';
-import type { TemplateResult } from 'lit-element';
+import { render } from 'lit';
+import type { TemplateResult } from 'lit';
 
@@ -5,0 +5,0 @@ /**

src/stripe-elements.d.ts

 /// <reference types="stripe-v3" />
-import { PropertyValues } from 'lit-element';
-import { StripeBase, StripePaymentResponse, SlotName } from './StripeBase';
+import type { PropertyValues } from 'lit';
+import { StripeBase, StripePaymentResponse, SlotName } from './StripeBase.js';
 /**
@@ -128,3 +128,3 @@ * [Stripe.js v3 Card Elements](https://stripe.com/docs/elements), but it's a Web Component!
     static readonly elementType = "card";
-    static readonly styles: import("lit-element").CSSResult[];
+    static readonly styles: import("lit").CSSResult[];
     protected get slotName(): SlotName;
@@ -131,0 +131,0 @@ /**

src/stripe-elements.js

@@ -10,7 +10,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { property, customElement } from 'lit-element';
-import bound from 'bind-decorator';
-import { StripeBase } from './StripeBase';
-import { dash } from './lib/strings';
-import { stripeMethod } from './lib/stripe-method-decorator';
+import { property, customElement } from 'lit/decorators.js';
+import { bound } from './lib/bound.js';
+import { StripeBase } from './StripeBase.js';
+import { dash } from './lib/strings.js';
+import { stripeMethod } from './lib/stripe-method-decorator.js';
 import sharedStyles from './shared.css';
@@ -17,0 +17,0 @@ import style from './stripe-elements.css';

src/stripe-elements.ts

@@ -1,8 +0,10 @@
-import { PropertyValues, property, customElement } from 'lit-element';
+import type { PropertyValues } from 'lit';
+import type * as _ from '@webcomponents/webcomponentsjs';
+import { property, customElement } from 'lit/decorators.js';
 
-import bound from 'bind-decorator';
+import { bound } from './lib/bound.js';
 
-import { StripeBase, StripePaymentResponse, SlotName } from './StripeBase';
-import { dash } from './lib/strings';
-import { stripeMethod } from './lib/stripe-method-decorator';
+import { StripeBase, StripePaymentResponse, SlotName } from './StripeBase.js';
+import { dash } from './lib/strings.js';
+import { stripeMethod } from './lib/stripe-method-decorator.js';
 import sharedStyles from './shared.css';
@@ -9,0 +11,0 @@ import style from './stripe-elements.css';

src/stripe-payment-request.d.ts

 /// <reference types="stripe-v3" />
-import type { CountryCode } from './lib/countries';
-import { PropertyValues } from 'lit-element';
-import { StripeBase, SlotName } from './StripeBase';
+import type { CountryCode } from './lib/countries.js';
+import type { PropertyValues } from 'lit';
+import { StripeBase, SlotName } from './StripeBase.js';
 declare type DisplayItem = stripe.paymentRequest.DisplayItem;
@@ -95,3 +95,3 @@ declare type ShippingOption = stripe.paymentRequest.ShippingOption;
     static readonly is = "stripe-payment-request";
-    static readonly styles: import("lit-element").CSSResult[];
+    static readonly styles: import("lit").CSSResult[];
     protected get slotName(): SlotName;
@@ -98,0 +98,0 @@ /**

src/stripe-payment-request.js

@@ -10,20 +10,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
-    return privateMap.get(receiver);
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to set private field on non-instance");
-    }
-    privateMap.set(receiver, value);
-    return value;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _displayItems, _shippingOptions;
-import { customElement, property } from 'lit-element';
-import bound from 'bind-decorator';
-import { StripeBase } from './StripeBase';
-import { throwResponseError } from './lib/stripe';
+var _StripePaymentRequest_displayItems, _StripePaymentRequest_shippingOptions;
+import { customElement, property } from 'lit/decorators.js';
+import { bound } from './lib/bound.js';
+import { StripeBase } from './StripeBase.js';
+import { throwResponseError } from './lib/stripe.js';
 import sharedStyles from './shared.css';
@@ -118,3 +116,3 @@ import style from './stripe-payment-request.css';
         this.canMakePayment = null;
-        _displayItems.set(this, void 0);
+        _StripePaymentRequest_displayItems.set(this, void 0);
         /**
@@ -132,3 +130,3 @@ * Stripe PaymentIntent
         this.pending = false;
-        _shippingOptions.set(this, void 0);
+        _StripePaymentRequest_shippingOptions.set(this, void 0);
         this.buttonType = 'default';
@@ -143,3 +141,3 @@ this.buttonTheme = 'dark';
     get displayItems() {
-        const value = __classPrivateFieldGet(this, _displayItems);
+        const value = __classPrivateFieldGet(this, _StripePaymentRequest_displayItems, "f");
         return (Array.isArray(value) ? value
@@ -150,3 +148,3 @@ : this.parseDatasets('stripe-display-item'));
         const oldValue = this.displayItems;
-        __classPrivateFieldSet(this, _displayItems, value);
+        __classPrivateFieldSet(this, _StripePaymentRequest_displayItems, value, "f");
         this.requestUpdate('displayItems', oldValue);
@@ -158,3 +156,3 @@ }
     get shippingOptions() {
-        const value = __classPrivateFieldGet(this, _shippingOptions);
+        const value = __classPrivateFieldGet(this, _StripePaymentRequest_shippingOptions, "f");
         return Array.isArray(value) ? value : this.parseDatasets('stripe-shipping-option');
@@ -164,3 +162,3 @@ }
         const oldValue = this.shippingOptions;
-        __classPrivateFieldSet(this, _shippingOptions, value);
+        __classPrivateFieldSet(this, _StripePaymentRequest_shippingOptions, value, "f");
         this.requestUpdate('shippingOptions', oldValue);
@@ -187,3 +185,3 @@ }
     getStripePaymentRequestOptions() {
-        const { country, currency, displayItems, shippingOptions, requestPayerEmail, requestPayerName, requestPayerPhone, label = '', amount = 0, } = this;
+        const { country, currency, displayItems, shippingOptions, requestShipping, requestPayerEmail, requestPayerName, requestPayerPhone, label = '', amount = 0, } = this;
         const total = { label, amount };
@@ -197,2 +195,3 @@ return {
             requestPayerPhone,
+            requestShipping,
             shippingOptions,
@@ -330,3 +329,3 @@ total,
 };
-_displayItems = new WeakMap(), _shippingOptions = new WeakMap();
+_StripePaymentRequest_displayItems = new WeakMap(), _StripePaymentRequest_shippingOptions = new WeakMap();
 StripePaymentRequest.is = 'stripe-payment-request';
@@ -333,0 +332,0 @@ StripePaymentRequest.styles = [

src/stripe-payment-request.ts

@@ -1,8 +0,9 @@
-import type { CountryCode } from './lib/countries';
-import { customElement, property, PropertyValues } from 'lit-element';
+import type { CountryCode } from './lib/countries.js';
+import type { PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 
-import bound from 'bind-decorator';
+import { bound } from './lib/bound.js';
 
-import { StripeBase, SlotName } from './StripeBase';
-import { throwResponseError } from './lib/stripe';
+import { StripeBase, SlotName } from './StripeBase.js';
+import { throwResponseError } from './lib/stripe.js';
 import sharedStyles from './shared.css';
@@ -327,2 +328,3 @@ import style from './stripe-payment-request.css';
       shippingOptions,
+      requestShipping,
       requestPayerEmail,
@@ -342,2 +344,3 @@ requestPayerName,
       requestPayerPhone,
+      requestShipping,
       shippingOptions,
@@ -344,0 +347,0 @@ total,

src/StripeBase.d.ts

 /// <reference types="stripe-v3" />
-import type { ShadyDOM, ShadyCSS } from '@webcomponents/webcomponentsjs';
-import { LitElement, TemplateResult, PropertyValues } from 'lit-element';
+import type { TemplateResult, PropertyValues } from 'lit';
+import { LitElement } from 'lit';
 export declare const enum SlotName {
@@ -5,0 +5,0 @@ 'stripe-elements' = "stripe-elements-slot",

src/StripeBase.js

@@ -10,11 +10,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { LitElement, property, html } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { LitNotify } from '@morbidick/lit-element-notify';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import bound from 'bind-decorator';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { bound } from './lib/bound.js';
 import { ReadOnlyPropertiesMixin } from '@open-wc/lit-helpers';
-import { appendTemplate, remove } from './lib/dom';
-import { dash, generateRandomMountElementId } from './lib/strings';
-import { isRepresentation } from './lib/predicates';
-import { throwBadResponse } from './lib/fetch';
+import { appendTemplate, remove } from './lib/dom.js';
+import { dash, generateRandomMountElementId } from './lib/strings.js';
+import { isRepresentation } from './lib/predicates.js';
+import { throwBadResponse } from './lib/fetch.js';
 class StripeElementsError extends Error {
@@ -21,0 +22,0 @@ constructor(tag, message) {

src/StripeBase.ts

@@ -1,14 +0,16 @@
-import type { ShadyDOM, ShadyCSS } from '@webcomponents/webcomponentsjs';
-import { LitElement, property, html, TemplateResult, PropertyValues } from 'lit-element';
+import type { TemplateResult, PropertyValues } from 'lit';
+import type * as _ from '@webcomponents/webcomponentsjs';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { LitNotify } from '@morbidick/lit-element-notify';
 
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
-import bound from 'bind-decorator';
+import { bound } from './lib/bound.js';
 
 import { ReadOnlyPropertiesMixin } from '@open-wc/lit-helpers';
-import { appendTemplate, remove } from './lib/dom';
-import { dash, generateRandomMountElementId } from './lib/strings';
-import { isRepresentation } from './lib/predicates';
-import { throwBadResponse } from './lib/fetch';
+import { appendTemplate, remove } from './lib/dom.js';
+import { dash, generateRandomMountElementId } from './lib/strings.js';
+import { isRepresentation } from './lib/predicates.js';
+import { throwBadResponse } from './lib/fetch.js';
 
@@ -15,0 +17,0 @@ export const enum SlotName {

stripe-elements.d.ts

 /// <reference types="stripe-v3" />
-import { PropertyValues } from 'lit-element';
-import { StripeBase, StripePaymentResponse, SlotName } from './StripeBase';
+import type { PropertyValues } from 'lit';
+import { StripeBase, StripePaymentResponse, SlotName } from './StripeBase.js';
 /**
@@ -128,3 +128,3 @@ * [Stripe.js v3 Card Elements](https://stripe.com/docs/elements), but it's a Web Component!
     static readonly elementType = "card";
-    static readonly styles: import("lit-element").CSSResult[];
+    static readonly styles: import("lit").CSSResult[];
     protected get slotName(): SlotName;
@@ -131,0 +131,0 @@ /**

stripe-elements.js

@@ -1,6 +0,6 @@
-import { css, property, customElement } from 'lit-element';
-import { S as StripeBase, s as sharedStyles, b as bind, d as dash } from './shared.js';
-import '@morbidick/lit-element-notify';
-import 'lit-html/directives/if-defined';
-import 'lit-html';
+import { property, customElement } from 'lit/decorators.js';
+import { s as styles$1, b as bound, S as StripeBase, d as dash } from './shared.js';
+import { css } from 'lit';
+import 'lit/directive.js';
+import 'lit/directives/if-defined.js';
 import '@typed/curry';
@@ -29,3 +29,3 @@ import '@lavadrop/kebab-case';
 
-var style = css`:host {
+const styles = css`:host {
   min-width: var(--stripe-elements-width, 300px);
@@ -397,4 +397,4 @@ min-height: var(--stripe-elements-height, 50px);
 StripeElements.styles = [
-    sharedStyles,
-    style,
+    styles$1,
+    styles,
 ];
@@ -470,3 +470,3 @@ __decorate([
 __decorate([
-    bind,
+    bound,
     __metadata("design:type", Function),
@@ -473,0 +473,0 @@ __metadata("design:paramtypes", [Object]),

stripe-payment-request.d.ts

 /// <reference types="stripe-v3" />
-import type { CountryCode } from './lib/countries';
-import { PropertyValues } from 'lit-element';
-import { StripeBase, SlotName } from './StripeBase';
+import type { CountryCode } from './lib/countries.js';
+import type { PropertyValues } from 'lit';
+import { StripeBase, SlotName } from './StripeBase.js';
 declare type DisplayItem = stripe.paymentRequest.DisplayItem;
@@ -95,3 +95,3 @@ declare type ShippingOption = stripe.paymentRequest.ShippingOption;
     static readonly is = "stripe-payment-request";
-    static readonly styles: import("lit-element").CSSResult[];
+    static readonly styles: import("lit").CSSResult[];
     protected get slotName(): SlotName;
@@ -98,0 +98,0 @@ /**

stripe-payment-request.js

@@ -1,6 +0,6 @@
-import { css, property, customElement } from 'lit-element';
-import { S as StripeBase, s as sharedStyles, b as bind } from './shared.js';
-import '@morbidick/lit-element-notify';
-import 'lit-html/directives/if-defined';
-import 'lit-html';
+import { property, customElement } from 'lit/decorators.js';
+import { s as styles$1, b as bound, S as StripeBase } from './shared.js';
+import { css } from 'lit';
+import 'lit/directive.js';
+import 'lit/directives/if-defined.js';
 import '@typed/curry';
@@ -18,3 +18,3 @@ import '@lavadrop/kebab-case';
 
-var style = css`#stripe {
+const styles = css`#stripe {
   box-sizing: border-box;
@@ -36,16 +36,14 @@ min-width: var(--stripe-payment-request-element-min-width, 300px);
 };
-var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, privateMap) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
-    return privateMap.get(receiver);
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to set private field on non-instance");
-    }
-    privateMap.set(receiver, value);
-    return value;
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _displayItems, _shippingOptions;
+var _StripePaymentRequest_displayItems, _StripePaymentRequest_shippingOptions;
 function isStripeDisplayItem(el) {
@@ -138,3 +136,3 @@ return el.tagName.toLowerCase() === 'stripe-display-item';
         this.canMakePayment = null;
-        _displayItems.set(this, void 0);
+        _StripePaymentRequest_displayItems.set(this, void 0);
         /**
@@ -152,3 +150,3 @@ * Stripe PaymentIntent
         this.pending = false;
-        _shippingOptions.set(this, void 0);
+        _StripePaymentRequest_shippingOptions.set(this, void 0);
         this.buttonType = 'default';
@@ -163,3 +161,3 @@ this.buttonTheme = 'dark';
     get displayItems() {
-        const value = __classPrivateFieldGet(this, _displayItems);
+        const value = __classPrivateFieldGet(this, _StripePaymentRequest_displayItems, "f");
         return (Array.isArray(value) ? value
@@ -170,3 +168,3 @@ : this.parseDatasets('stripe-display-item'));
         const oldValue = this.displayItems;
-        __classPrivateFieldSet(this, _displayItems, value);
+        __classPrivateFieldSet(this, _StripePaymentRequest_displayItems, value, "f");
         this.requestUpdate('displayItems', oldValue);
@@ -178,3 +176,3 @@ }
     get shippingOptions() {
-        const value = __classPrivateFieldGet(this, _shippingOptions);
+        const value = __classPrivateFieldGet(this, _StripePaymentRequest_shippingOptions, "f");
         return Array.isArray(value) ? value : this.parseDatasets('stripe-shipping-option');
@@ -184,3 +182,3 @@ }
         const oldValue = this.shippingOptions;
-        __classPrivateFieldSet(this, _shippingOptions, value);
+        __classPrivateFieldSet(this, _StripePaymentRequest_shippingOptions, value, "f");
         this.requestUpdate('shippingOptions', oldValue);
@@ -207,3 +205,3 @@ }
     getStripePaymentRequestOptions() {
-        const { country, currency, displayItems, shippingOptions, requestPayerEmail, requestPayerName, requestPayerPhone, label = '', amount = 0, } = this;
+        const { country, currency, displayItems, shippingOptions, requestShipping, requestPayerEmail, requestPayerName, requestPayerPhone, label = '', amount = 0, } = this;
         const total = { label, amount };
@@ -217,2 +215,3 @@ return {
             requestPayerPhone,
+            requestShipping,
             shippingOptions,
@@ -350,7 +349,7 @@ total,
 };
-_displayItems = new WeakMap(), _shippingOptions = new WeakMap();
+_StripePaymentRequest_displayItems = new WeakMap(), _StripePaymentRequest_shippingOptions = new WeakMap();
 StripePaymentRequest.is = 'stripe-payment-request';
 StripePaymentRequest.styles = [
-    sharedStyles,
-    style,
+    styles$1,
+    styles,
 ];
@@ -430,3 +429,3 @@ __decorate([
 __decorate([
-    bind,
+    bound,
     __metadata("design:type", Function),
@@ -437,3 +436,3 @@ __metadata("design:paramtypes", []),
 __decorate([
-    bind,
+    bound,
     __metadata("design:type", Function),
@@ -444,3 +443,3 @@ __metadata("design:paramtypes", [Object, Object]),
 __decorate([
-    bind,
+    bound,
     __metadata("design:type", Function),
@@ -451,3 +450,3 @@ __metadata("design:paramtypes", [Object]),
 __decorate([
-    bind,
+    bound,
     __metadata("design:type", Function),
@@ -458,3 +457,3 @@ __metadata("design:paramtypes", [Object]),
 __decorate([
-    bind,
+    bound,
     __metadata("design:type", Function),
@@ -465,3 +464,3 @@ __metadata("design:paramtypes", [Object, Object]),
 __decorate([
-    bind,
+    bound,
     __metadata("design:type", Function),
@@ -472,3 +471,3 @@ __metadata("design:paramtypes", [Object]),
 __decorate([
-    bind,
+    bound,
     __metadata("design:type", Function),
@@ -475,0 +474,0 @@ __metadata("design:paramtypes", [Object]),

StripeBase.d.ts

 /// <reference types="stripe-v3" />
-import type { ShadyDOM, ShadyCSS } from '@webcomponents/webcomponentsjs';
-import { LitElement, TemplateResult, PropertyValues } from 'lit-element';
+import type { TemplateResult, PropertyValues } from 'lit';
+import { LitElement } from 'lit';
 export declare const enum SlotName {
@@ -5,0 +5,0 @@ 'stripe-elements' = "stripe-elements-slot",

No alert changes

Improved metrics

Number of package files

82

9.33%

Is type module

Yes

NaN

Worsened metrics

Total package byte prevSize

512019

-9.05%

Dev dependency count

54

12.5%

Lines of code

8028

-7.24%

Number of lines in readme file

292

-58.11%

Dependency changes

• + Added

  lit@^2.0.0-rc.3

• + Added

  @lit-labs/ssr-dom-shim@1.3.0
  (transitive)

• + Added

  @lit/reactive-element@1.6.3
  (transitive)

• + Added

  @types/trusted-types@2.0.7
  (transitive)

• + Added

  lit@2.8.0
  (transitive)

• + Added

  lit-element@3.3.3
  (transitive)

• + Added

  lit-html@2.8.0
  (transitive)

• - Removed

  lit-element@^2.4.0

• Updated

  @babel/runtime@^7.15.3

• Updated

  @morbidick/lit-element-notify@1.1.1

• Updated

  @pacote/memoize@^1.1.6

• Updated

  @types/stripe-v3@^3.1.25

• Updated

  patch-package@^6.4.7

• Updated

  tslib@^2.3.1