@justifi/webcomponents 3.3.5 → 4.0.2

package/dist/collection/components/business-address/business-address.js

@@ -0,0 +1,99 @@
+import { Host, h } from '@stencil/core';
+import StateOptions from '../billing-form/state-options';
+import BusinessAddressFormSchema from './business-address-schema';
+export class BusinessAddress {
+  constructor() {
+    this.businessAddress = {
+      line1: '',
+      line2: '',
+      city: '',
+      state: '',
+      postal_code: '',
+      country: ''
+    };
+    this.businessAddressErrors = {};
+  }
+  setFormValue(event) {
+    const data = event.detail;
+    const businessAddressClone = Object.assign({}, this.businessAddress);
+    if (data.name) {
+      businessAddressClone[data.name] = data.value;
+      this.businessAddress = businessAddressClone;
+    }
+  }
+  async submit() {
+    const newErrors = {};
+    let isValid = true;
+    try {
+      await BusinessAddressFormSchema.validate(this.businessAddress, { abortEarly: false });
+    }
+    catch (err) {
+      isValid = false;
+      err.inner.map((item) => {
+        newErrors[item.path] = item.message;
+      });
+    }
+    this.businessAddressErrors = newErrors;
+    return { isValid: isValid, values: this.businessAddress };
+  }
+  ;
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("text-input", { name: "line1", label: "Street Address", defaultValue: (_a = this.businessAddress) === null || _a === void 0 ? void 0 : _a.line1, error: (_b = this.businessAddressErrors) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { class: "col-12" }, h("text-input", { name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.businessAddress) === null || _c === void 0 ? void 0 : _c.line2, error: (_d = this.businessAddressErrors) === null || _d === void 0 ? void 0 : _d.line2 })), h("div", { class: "col-12" }, h("text-input", { name: "city", label: "City", defaultValue: (_e = this.businessAddress) === null || _e === void 0 ? void 0 : _e.city, error: (_f = this.businessAddressErrors) === null || _f === void 0 ? void 0 : _f.city })), h("div", { class: "col-12" }, h("select-input", { name: "state", label: "State", options: StateOptions, defaultValue: this.businessAddress.state, error: this.businessAddressErrors.state })), h("div", { class: "col-12" }, h("text-input", { name: "postal_code", label: "Postal Code", defaultValue: (_g = this.businessAddress) === null || _g === void 0 ? void 0 : _g.postal_code, error: (_h = this.businessAddressErrors) === null || _h === void 0 ? void 0 : _h.postal_code })))));
+  }
+  static get is() { return "justifi-business-address"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["business-address.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["business-address.css"]
+    };
+  }
+  static get states() {
+    return {
+      "businessAddress": {},
+      "businessAddressErrors": {}
+    };
+  }
+  static get methods() {
+    return {
+      "submit": {
+        "complexType": {
+          "signature": "() => Promise<{ isValid: boolean; values: BusinessAddressFormFields; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "BusinessAddressFormFields": {
+              "location": "import",
+              "path": "./business-address-schema"
+            },
+            "ValidationError": {
+              "location": "import",
+              "path": "yup"
+            }
+          },
+          "return": "Promise<{ isValid: boolean; values: BusinessAddressFormFields; }>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "fieldReceivedInput",
+        "method": "setFormValue",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/card-form/card-form.js

@@ -17,7 +17,7 @@ export class CardForm {
   }
   /**
    *  Makes a tokenization request to the iframe
-  */
+   */
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -26,7 +26,7 @@ export class CardForm {
   }
   /**
    *  Runs a validation on the form and shows errors if any
-  */
+   */
   async validate() {
     if (!this.childRef) {
       throw new Error('Cannot call validate');
@@ -163,7 +163,7 @@ export class CardForm {
     return {
       "tokenize": {
         "complexType": {
-          "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
+          "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<CreatePaymentMethodResponse>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -172,6 +172,10 @@ export class CardForm {
             "Promise": {
               "location": "global"
             },
+            "CreatePaymentMethodResponse": {
+              "location": "import",
+              "path": "../payment-method-form/payment-method-responses"
+            },
             "Parameters": {
               "location": "global"
             },
@@ -179,7 +183,7 @@ export class CardForm {
               "location": "global"
             }
           },
-          "return": "Promise<any>"
+          "return": "Promise<CreatePaymentMethodResponse>"
         },
         "docs": {
           "text": "Makes a tokenization request to the iframe",

package/dist/collection/components/card-form/card-form.stories.js

@@ -8,11 +8,11 @@ export default {
       table: {
         disable: isDev ? false : true,
         category: 'props',
-      }
+      },
     },
   },
   decorators: [
-    (story) => `
+    story => `
       ${story()}
       <script>${addEvents()}</script>
     `,
@@ -31,8 +31,12 @@ const handleReady = () => {
   const cardForm = document.querySelector('justifi-card-form');
   const validateBtn = document.querySelector('#validate-btn');
   const tokenizeBtn = document.querySelector('#tokenize-btn');
-  validateBtn === null || validateBtn === void 0 ? void 0 : validateBtn.addEventListener('click', () => { handleValidateClick(cardForm); });
-  tokenizeBtn === null || tokenizeBtn === void 0 ? void 0 : tokenizeBtn.addEventListener('click', () => { handleTokenizeClick(cardForm, {}); });
+  validateBtn === null || validateBtn === void 0 ? void 0 : validateBtn.addEventListener('click', () => {
+    handleValidateClick(cardForm);
+  });
+  tokenizeBtn === null || tokenizeBtn === void 0 ? void 0 : tokenizeBtn.addEventListener('click', () => {
+    handleTokenizeClick(cardForm, {});
+  });
 };
 const addEvents = () => {
   addEventListener('cardFormReady', handleReady);
@@ -56,7 +60,7 @@ const FormButtons = `
   </div>`;
 const Template = (args) => {
   const includeButtons = true;
-  return (`
+  return `
     <div>
       <style>
       :root {
@@ -71,7 +75,7 @@ const Template = (args) => {
       />
     </div>
     ${includeButtons ? FormButtons : ''}
-  `);
+  `;
 };
 export const Basic = Template.bind({});
 Basic.args = {
@@ -116,5 +120,5 @@ const styledVariables = `
 `;
 export const Styled = Template.bind({});
 Styled.args = {
-  'css-variables': styledVariables
+  'css-variables': styledVariables,
 };

package/dist/collection/components/card-form/example.js

@@ -0,0 +1,59 @@
+import { head } from '../../../storybook-pages/example-parts';
+
+export default `<!DOCTYPE html>
+<html dir="ltr" lang="en">
+
+${head('justifi-card-form')}
+
+<body>
+  <justifi-card-form></justifi-card-form>
+  <button type="submit" id="card-submit-button">Tokenize</button>
+  <button type="submit" id="card-validate-button">Validate</button>
+</body>
+
+<script>
+  (function () {
+    // Card form component
+    var cardForm = document.querySelector('justifi-card-form');
+    var cardSubmitButton = document.querySelector('#card-submit-button');
+    var cardValidateButton = document.querySelector('#card-validate-button');
+
+    cardForm.addEventListener('cardFormReady', function () {
+      console.log('justifi-card-form ready');
+    });
+
+    cardSubmitButton.addEventListener('click', (event) => {
+      console.log('card form tokenize button clicked');
+      // All of this information would come from your form instead of being hard coded
+      // Card number, expiration and cvv are collected on our iframe
+      const paymentMethodData = {
+        name: 'John Doe',
+        address_line1: '123 Broadway', // optional
+        address_line2: '', // optional
+        address_city: 'Minneapolis', // optional
+        address_state: 'MN', // optional
+        address_postal_code: '55413',
+        address_country: 'US', // optional
+        metadata: { something: "somevalue" } // optional
+      };
+      // ACCOUNT_ID is optional, currently required for platforms
+      // ACCOUNT_ID is the seller account for which you are tokenizing
+      cardForm.tokenize('CLIENT_ID', paymentMethodData, 'ACCOUNT_ID')
+        .then((data) => {
+          // This is where you can submit the form and use the payment method token
+          // on your backend
+          console.log('justifi-card-form tokenized: ', data);
+        });
+    });
+
+    cardValidateButton.addEventListener('click', (event) => {
+      console.log('card validate button clicked');
+      cardForm.validate()
+        .then((data) => {
+          console.log('justifi-card-form validated. Is valid? ', data.isValid);
+        });
+    });
+  })();
+</script>
+
+</html>`;

package/dist/collection/components/payment-form/example.js

@@ -0,0 +1,23 @@
+import { head } from '../../../storybook-pages/example-parts';
+
+export default `<!DOCTYPE html>
+<html dir="ltr" lang="en">
+
+${head('justifi-payment-form')}
+
+<body>
+  <justifi-payment-form bank-account="true" card="true"></justifi-payment-form>
+</body>
+
+<script>
+  (function () {
+    var paymentForm = document.querySelector('justifi-payment-form');
+
+    paymentForm.addEventListener('submitted', (data) => {
+      // here is where you would submit a payment with the token
+      console.log('data');
+    });
+  })();
+</script>
+
+</html>`;

package/dist/collection/components/payment-form/payment-form.css

@@ -1990,6 +1990,8 @@ justifi-payment-method-form {
   padding: var(--jfi-submit-button-padding);
   font-size: var(--jfi-submit-button-font-size);
   border-radius: var(--jfi-submit-button-border-radius);
+  width: var(--jfi-submit-button-width);
+  box-shadow: var(--jfi-submit-button-box-shadow);
 }
 
 .jfi-submit-button:hover {

package/dist/collection/components/payment-form/payment-form.js

@@ -50,7 +50,7 @@ export class PaymentForm {
     this.submitted.emit(tokenizeResponse);
   }
   render() {
-    return (h(Host, null, h("form", { class: "row gy-3" }, (this.allowedPaymentMethodTypes.length > 1) && (h("div", { class: "col-12" }, h("justifi-payment-method-selector", { paymentMethodTypes: this.allowedPaymentMethodTypes, selectedPaymentMethodType: this.selectedPaymentMethodType }))), h("div", { class: "col-12" }, h("justifi-payment-method-form", { "payment-method-form-type": this.selectedPaymentMethodType, "iframe-origin": this.iframeOrigin, ref: el => {
+    return (h(Host, null, h("form", { class: "row gy-3" }, this.allowedPaymentMethodTypes.length > 1 && (h("div", { class: "col-12" }, h("justifi-payment-method-selector", { paymentMethodTypes: this.allowedPaymentMethodTypes, selectedPaymentMethodType: this.selectedPaymentMethodType }))), h("div", { class: "col-12" }, h("justifi-payment-method-form", { "payment-method-form-type": this.selectedPaymentMethodType, "iframe-origin": this.iframeOrigin, ref: el => {
         if (el) {
           this.paymentMethodFormRef = el;
         }
@@ -58,7 +58,7 @@ export class PaymentForm {
         if (el) {
           this.billingFormRef = el;
         }
-      } })), h("div", { class: "col-12" }, h("button", { onClick: (event) => this.submit(event), disabled: !this.submitButtonEnabled, type: "submit", class: "btn btn-primary jfi-submit-button" }, this.submitButtonText || 'Submit')))));
+      } })), h("div", { class: "col-12" }, h("button", { onClick: event => this.submit(event), disabled: !this.submitButtonEnabled, type: "submit", class: "btn btn-primary jfi-submit-button" }, this.submitButtonText || 'Submit')))));
   }
   static get is() { return "justifi-payment-form"; }
   static get encapsulation() { return "shadow"; }
@@ -214,9 +214,14 @@ export class PaymentForm {
           "text": ""
         },
         "complexType": {
-          "original": "{ data: any }",
-          "resolved": "{ data: any; }",
-          "references": {}
+          "original": "CreatePaymentMethodResponse",
+          "resolved": "BankAccountCreateResponse | CardCreateResponse",
+          "references": {
+            "CreatePaymentMethodResponse": {
+              "location": "import",
+              "path": "../payment-method-form/payment-method-responses"
+            }
+          }
         }
       }];
   }

package/dist/collection/components/payment-form/payment-form.stories.js

@@ -8,13 +8,13 @@ export default {
       table: {
         disable: isDev ? false : true,
         category: 'props',
-      }
+      },
     },
   },
 };
 const Template = (args) => {
   // The <div> here should be replaced by a `display` property in the cardForm potentially
-  return (`
+  return `
     <div>
       <justifi-payment-form
         card=${args.card}
@@ -43,28 +43,28 @@ const Template = (args) => {
       });
     })()
     </script>
-  `);
+  `;
 };
 export const Basic = Template.bind({});
 Basic.args = {
   'bank-account': true,
-  card: true,
-  email: '',
+  'card': true,
+  'email': '',
   'client-id': '',
   'account-id': '',
   'submit-button-text': '',
-  'iframe-origin': ''
+  'iframe-origin': '',
 };
 export const Styled = Template.bind({});
 Styled.args = {
   'bank-account': true,
-  card: true,
-  email: '',
+  'card': true,
+  'email': '',
   'client-id': '',
   'account-id': '',
   'submit-button-text': '',
   'iframe-origin': '',
-  cssVariables: (`
+  'cssVariables': `
   --jfi-primary-color: #212529;
 
   --jfi-layout-padding: 0;
@@ -99,11 +99,11 @@ Styled.args = {
   --jfi-error-message-font-size: .875rem;
 
   --jfi-submit-button-color: white;
-  --jfi-submit-button-background-color: var(--jfi-primary-color);
+  --jfi-submit-button-background-color: #3F3F47;
   --jfi-submit-button-border-color: var(--jfi-primary-color);
   --jfi-submit-button-padding: 0.375rem 0.75rem;
   --jfi-submit-button-font-size: 1rem;
-  --jfi-submit-button-border-radius: 4px;
+  --jfi-submit-button-border-radius: 1px;
   --jfi-submit-button-color-hover: white;
   --jfi-submit-button-background-color-hover: var(--jfi-primary-color);
   --jfi-submit-button-border-color-hover: var(--jfi-primary-color);
@@ -113,6 +113,8 @@ Styled.args = {
   --jfi-submit-button-color-active: white;
   --jfi-submit-button-background-color-active: var(--jfi-primary-color);
   --jfi-submit-button-border-color-active: var(--jfi-primary-color);
+  --jfi-submit-button-width: 100%;
+  --jfi-submit-button-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
 
   --jfi-radio-button-color: var(--jfi-primary-color);
   --jfi-radio-button-background-color: transparent;
@@ -128,5 +130,6 @@ Styled.args = {
   --jfi-radio-button-background-color-selected-hover: var(--jfi-primary-color);
   --jfi-radio-button-border-color-selected-hover: var(--jfi-primary-color);
   --jfi-radio-button-border-color-hover: var(--jfi-primary-color);
-  `)
+  --jfi-radio-button-group-width: 100%;
+  `,
 };

package/dist/collection/components/payment-form/payment-method-selector.css

@@ -1360,4 +1360,9 @@ textarea.form-control-lg {
   color: var(--jfi-radio-button-color-selected);
   background-color: var(--jfi-radio-button-background-color-selected);
   border-color: var(--jfi-radio-button-border-color-selected);
+}
+
+.jfi-btn-radio-group {
+  display: inline-flex;
+  width: var(--jfi-radio-button-group-width);
 }

package/dist/collection/components/payment-form/payment-method-selector.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from '@stencil/core';
 const PaymentMethodLabels = {
   bankAccount: 'Bank Account',
-  card: 'Card'
+  card: 'Card',
 };
 export class PaymentMethodSelector {
   constructor() {
@@ -12,9 +12,8 @@ export class PaymentMethodSelector {
     this.paymentMethodSelected.emit(event.target.value);
   }
   render() {
-    return (h("div", { class: "btn-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType])))));
+    return (h("div", { class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
   }
-  ;
   static get is() { return "justifi-payment-method-selector"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {

package/dist/collection/components/payment-method-form/get-computed-theme.js

@@ -41,7 +41,7 @@ const getComputedTheme = () => {
       color: computedStyles.getPropertyValue('--jfi-error-message-color'),
       margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),
       fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),
-    }
+    },
   };
   return computedTheme;
 };

package/dist/collection/components/payment-method-form/message-event-types.js

@@ -12,5 +12,5 @@ export const MessageEventType = {
     validate: 'justifi.bankAccount.validate',
     resize: 'justifi.bankAccount.resize',
     styleOverrides: 'justifi.bankAccount.styleOverrides',
-  }
+  },
 };

package/dist/collection/components/payment-method-form/payment-method-form.js

@@ -40,9 +40,8 @@ export class PaymentMethodForm {
     var _a, _b;
     (_b = (_a = this.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(Object.assign({ eventType: eventType }, payload), '*');
   }
-  ;
   async postMessageWithResponseListener(eventType, payload) {
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
       const responseListener = (event) => {
         if (event.data.eventType !== eventType)
           return;
@@ -63,18 +62,16 @@ export class PaymentMethodForm {
     };
     return this.postMessageWithResponseListener(eventType, payload);
   }
-  ;
   async validate() {
     return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);
   }
-  ;
   composeQueryParams(values) {
-    const queryParams = values.map((value) => {
+    const queryParams = values.map(value => {
       if (value === values[0]) {
-        return value = `?${value}`;
+        return (value = `?${value}`);
       }
       else {
-        return value = `&${value}`;
+        return (value = `&${value}`);
       }
     });
     return queryParams.join('');
@@ -93,7 +90,7 @@ export class PaymentMethodForm {
     return iframeSrc.concat(this.composeQueryParams(paramsList));
   }
   render() {
-    return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: (el) => this.iframeElement = el, height: this.height })));
+    return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => (this.iframeElement = el), height: this.height })));
   }
   static get is() { return "justifi-payment-method-form"; }
   static get originalStyleUrls() {
@@ -220,7 +217,7 @@ export class PaymentMethodForm {
     return {
       "tokenize": {
         "complexType": {
-          "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
+          "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<CreatePaymentMethodResponse>",
           "parameters": [{
               "tags": [],
               "text": ""
@@ -234,9 +231,13 @@ export class PaymentMethodForm {
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "CreatePaymentMethodResponse": {
+              "location": "import",
+              "path": "./payment-method-responses"
             }
           },
-          "return": "Promise<any>"
+          "return": "Promise<CreatePaymentMethodResponse>"
         },
         "docs": {
           "text": "",

package/dist/collection/components/payment-method-form/payment-method-responses.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/payments-list/payments-list.js

@@ -13,15 +13,15 @@ export class PaymentsList {
   fetchData() {
     const accountId = this.accountId;
     const endpoint = `account/${accountId}/payments`;
-    Api(this.auth.token).get(endpoint)
+    Api(this.auth.token)
+      .get(endpoint)
       .then((response) => {
-      const data = response.data.map((dataItem) => new Payment(dataItem));
+      const data = response.data.map(dataItem => new Payment(dataItem));
       this.payments = data;
     });
   }
-  ;
   render() {
-    return (h(Host, null, h("table", { class: "justifi-table" }, h("thead", null, h("tr", null, h("th", { scope: "col", title: "The date and time each payment was made" }, "Made on"), h("th", { scope: "col", title: "The dollar amount of each payment" }, "Amount"), h("th", { scope: "col" }, "Account"), h("th", { scope: "col" }, "Description"), h("th", { scope: "col" }, "Payment ID"), h("th", { scope: "col" }, "Cardholder"), h("th", { scope: "col" }, "Payment Method"), h("th", { scope: "col" }, "Status"))), h("tbody", null, this.payments.map((payment) => {
+    return (h(Host, null, h("table", { class: "justifi-table" }, h("thead", null, h("tr", null, h("th", { scope: "col", title: "The date and time each payment was made" }, "Made on"), h("th", { scope: "col", title: "The dollar amount of each payment" }, "Amount"), h("th", { scope: "col" }, "Account"), h("th", { scope: "col" }, "Description"), h("th", { scope: "col" }, "Payment ID"), h("th", { scope: "col" }, "Cardholder"), h("th", { scope: "col" }, "Payment Method"), h("th", { scope: "col" }, "Status"))), h("tbody", null, this.payments.map(payment => {
       var _a, _b, _c, _d;
       h("tr", null, h("td", null, h("div", null, formatDate(payment.created_at)), h("div", null, formatTime(payment.created_at))), h("td", null, formatCurrency(payment.amount)), h("td", null, payment.account_id), h("td", null, payment.description), h("td", null, payment.id), h("td", null, (_b = (_a = payment.payment_method) === null || _a === void 0 ? void 0 : _a.card) === null || _b === void 0 ? void 0 : _b.name), h("td", null, (_d = (_c = payment.payment_method) === null || _c === void 0 ? void 0 : _c.card) === null || _d === void 0 ? void 0 : _d.acct_last_four), h("td", null, payment.status));
     })))));

package/dist/collection/components/select-input/select-input.js

@@ -13,9 +13,8 @@ export class SelectInput {
     const name = target.getAttribute('name');
     this.fieldReceivedInput.emit({ name: name, value: target.value });
   }
-  ;
   render() {
-    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label" }, this.label), h("select", { name: this.name, onInput: (event) => this.onInput(event), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-select is-invalid' : 'form-select' }, this.options.map((option) => h("option", { value: option.value }, option.label))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label" }, this.label), h("select", { name: this.name, onInput: event => this.onInput(event), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-select is-invalid' : 'form-select' }, this.options.map(option => (h("option", { value: option.value }, option.label)))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
   }
   static get is() { return "select-input"; }
   static get encapsulation() { return "shadow"; }
@@ -103,7 +102,7 @@ export class SelectInput {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "{ label: string, value: string }[]",
+          "original": "{ label: string; value: string }[]",
           "resolved": "{ label: string; value: string; }[]",
           "references": {}
         },
@@ -133,7 +132,7 @@ export class SelectInput {
           "text": ""
         },
         "complexType": {
-          "original": "{ name: string, value: string }",
+          "original": "{ name: string; value: string }",
           "resolved": "{ name: string; value: string; }",
           "references": {}
         }

package/dist/collection/components/text-input/text-input.js

@@ -12,9 +12,8 @@ export class TextInput {
     const name = target.getAttribute('name');
     this.fieldReceivedInput.emit({ name: name, value: target.value });
   }
-  ;
   render() {
-    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label" }, this.label), h("input", { name: this.name, type: "text", onInput: (event) => this.onInput(event), value: this.internalValue || this.defaultValue, part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-control is-invalid' : 'form-control' }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label" }, this.label), h("input", { name: this.name, type: "text", onInput: event => this.onInput(event), value: this.internalValue || this.defaultValue, part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-control is-invalid' : 'form-control' }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
   }
   static get is() { return "text-input"; }
   static get encapsulation() { return "shadow"; }
@@ -117,7 +116,7 @@ export class TextInput {
           "text": ""
         },
         "complexType": {
-          "original": "{ name: string, value: string }",
+          "original": "{ name: string; value: string }",
           "resolved": "{ name: string; value: string; }",
           "references": {}
         }

package/dist/collection/utils/utils.js

@@ -7,27 +7,23 @@ export function formatCurrency(amount, withSymbol = true) {
     const formattedString = withSymbol ? '$0,0.00' : '0,0.00';
     return Dinero({ amount: amount, currency: 'USD' }).toFormat(formattedString);
   }
-  return (amount < 0) ? `(${format(-amount)})` : format(amount);
+  return amount < 0 ? `(${format(-amount)})` : format(amount);
 }
-;
 export function formatDate(dateString) {
   if (!dateString)
     return '';
   const date = new Date(dateString);
   return format(date, 'MMM d, yyyy');
 }
-;
 export function formatTime(dateString) {
   if (!dateString)
     return '';
   const date = new Date(dateString);
   return format(date, 'h:mmaaa');
 }
-;
 export function formatTimeSeconds(dateString) {
   if (!dateString)
     return '';
   const date = new Date(dateString);
   return format(date, 'h:mm:ssaaa');
 }
-;

package/dist/components/Payment.js

@@ -52,7 +52,7 @@ class Payment {
     this.updated_at = payment.updated_at;
   }
   get disputedStatus() {
-    const lost = this.disputes.some((dispute) => dispute.status === PaymentDisputedStatuses.lost);
+    const lost = this.disputes.some(dispute => dispute.status === PaymentDisputedStatuses.lost);
     // if a dispute is 'won', we don't show a dispute status, just general status
     if (!this.disputed) {
       return null;