@justifi/webcomponents 4.2.2 → 4.5.0

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

@@ -0,0 +1,209 @@
+import { Host, h } from "@stencil/core";
+import { Api } from "../../api";
+import { pagingDefaults } from "../table/table-utils";
+import { Business } from "../../api/Business";
+import { formatDate } from "../../utils/utils";
+/**
+  * @exportedPart table-head: Table head
+  * @exportedPart table-head-row: Head row
+  * @exportedPart table-head-cell: Individual head cell
+  * @exportedPart table-body: Body of the table
+  * @exportedPart table-row: Row of the table
+  * @exportedPart table-cell: Individual cell of the table
+  * @exportedPart loading-state-cell: Row for loading state
+  * @exportedPart loading-state-spinner: Spinner element for loading state
+  * @exportedPart error-state: Row for Error state
+  * @exportedPart empty-state: Row for Emtpy state
+  * @exportedPart pagination-bar: Pagination bar
+  * @exportedPart arrow: Both paging buttons
+  * @exportedPart arrow-left: Previous page button
+  * @exportedPart arrow-right: Next page button
+  * @exportedPart arrow-disabled: Disabled state for paging buttons
+*/
+export class BusinessList {
+  constructor() {
+    this.onPageChange = (direction) => {
+      return () => {
+        this.fetchData(direction);
+      };
+    };
+    this.mapProductStatusToBadge = (status) => {
+      return status && 'bg-success' || 'bg-secondary';
+    };
+    this.mapBusinessType = (type) => {
+      switch (type) {
+        case 'individual':
+          return 'Individual';
+        case 'non_profit':
+          return 'Non Profit';
+        case 'for_profit':
+          return 'For Profit';
+        case 'government_entity':
+          return 'Government Entity';
+      }
+    };
+    this.mapBusinessStructure = (type) => {
+      switch (type) {
+        case 'sole_proprietorship':
+          return 'Sole Proprietorship';
+        case 'single_llc':
+          return 'Single LLC';
+        case 'multi_llc':
+          return 'Multi LLC';
+        case 'private_partnership':
+          return 'Private Partnership';
+        case 'private_corporation':
+          return 'Private Corporation';
+        case 'unincorporated_association':
+          return 'Unincorporated Association';
+        case 'public_partnership':
+          return 'Public Partnership';
+        case 'public_corporation':
+          return 'Public Corporation';
+        case 'incorporated':
+          return 'Incorporated';
+        case 'unincorporated':
+          return 'Unincorporated';
+        case 'government_unit':
+          return 'Government Unit';
+        case 'government_instrumentality':
+          return 'Government Instrumentality';
+        case 'tax_exempt_government_instrumentality':
+          return 'Tax Exempt Government Instrumentality';
+      }
+    };
+    this.accountId = undefined;
+    this.authToken = undefined;
+    this.businesses = [];
+    this.loading = true;
+    this.errorMessage = undefined;
+    this.paging = pagingDefaults;
+  }
+  updateOnPropChange() {
+    this.fetchData();
+  }
+  connectedCallback() {
+    this.fetchData();
+  }
+  async fetchData(direction) {
+    var _a;
+    if (!this.accountId || !this.authToken) {
+      this.errorMessage = "Can not fetch any data without an AccountID and an AuthToken";
+      this.loading = false;
+      return;
+    }
+    this.loading = true;
+    const endpoint = `entities/business`;
+    const response = await Api(this.authToken, process.env.ENTITIES_API_ORIGIN).get(endpoint, {
+      account_id: this.accountId,
+      paging: this.paging,
+      direction: direction
+    });
+    if (!response.error) {
+      this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
+      const data = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.map(dataItem => new Business(dataItem));
+      this.businesses = data;
+    }
+    else {
+      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    }
+    this.loading = false;
+  }
+  render() {
+    return (h(Host, null, h("justifi-table", { columnData: [
+        ['Legal Name', 'The name associated with this Business'],
+        ['Business Type', 'The business type'],
+        ['Business Structure', 'The business structure'],
+        ['Tax ID', 'The tax ID associated with this business'],
+        ['Industry', 'The industry this business participates in'],
+        ['Product Ready', 'List of our products that are used by this business'],
+        ['Created at', 'Date this business was created'],
+      ], rowData: this.businesses.map((business) => ([
+        business.legal_name,
+        this.mapBusinessType(business.business_type),
+        this.mapBusinessStructure(business.business_structure),
+        business.tax_id,
+        business.industry,
+        {
+          type: 'inner',
+          value: `
+                    <div class="d-flex flex-nowrap gap-1">
+                      <span class="badge ${this.mapProductStatusToBadge(business.product_categories.credit)}">Credit</span>
+                      <span class="badge ${this.mapProductStatusToBadge(business.product_categories.insurance)}">Insurance</span>
+                      <span class="badge ${this.mapProductStatusToBadge(business.product_categories.lending)}">Lending</span>
+                      <span class="badge ${this.mapProductStatusToBadge(business.product_categories.payment)}">Payment</span>
+                    </div>
+                  `
+        },
+        formatDate(business.created_at),
+      ])), loading: this.loading, "error-message": this.errorMessage, paging: Object.assign(Object.assign({}, this.paging), { onPrev: this.onPageChange('prev'), onNext: this.onPageChange('next') }) })));
+  }
+  static get is() { return "justifi-business-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["business-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["business-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accountId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "account-id",
+        "reflect": false
+      },
+      "authToken": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auth-token",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "businesses": {},
+      "loading": {},
+      "errorMessage": {},
+      "paging": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "accountId",
+        "methodName": "updateOnPropChange"
+      }, {
+        "propName": "authToken",
+        "methodName": "updateOnPropChange"
+      }];
+  }
+}
+//# sourceMappingURL=business-list.js.map

package/dist/collection/components/business-list/business-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"business-list.js","sourceRoot":"","sources":["../../../../src/components/business-list/business-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection } from '../../api';\nimport { PagingInfo, pagingDefaults } from '../table/table-utils';\nimport { Business } from '../../api/Business';\nimport { formatDate } from '../../utils/utils';\n\n/**\n  * @exportedPart table-head: Table head\n  * @exportedPart table-head-row: Head row\n  * @exportedPart table-head-cell: Individual head cell\n  * @exportedPart table-body: Body of the table\n  * @exportedPart table-row: Row of the table\n  * @exportedPart table-cell: Individual cell of the table\n  * @exportedPart loading-state-cell: Row for loading state\n  * @exportedPart loading-state-spinner: Spinner element for loading state\n  * @exportedPart error-state: Row for Error state\n  * @exportedPart empty-state: Row for Emtpy state\n  * @exportedPart pagination-bar: Pagination bar\n  * @exportedPart arrow: Both paging buttons\n  * @exportedPart arrow-left: Previous page button\n  * @exportedPart arrow-right: Next page button\n  * @exportedPart arrow-disabled: Disabled state for paging buttons\n*/\n@Component({\n  tag: 'justifi-business-list',\n  styleUrl: 'business-list.scss',\n  shadow: true,\n})\n\nexport class BusinessList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() businesses: Business[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n\n  @Watch('accountId')\n  @Watch('authToken')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  onPageChange = (direction: string) => {\n    return () => {\n      this.fetchData(direction);\n    }\n  }\n\n  mapProductStatusToBadge = (status: boolean) => {\n    return status && 'bg-success' || 'bg-secondary';\n  }\n\n  mapBusinessType = (type: string) => {\n    switch (type) {\n      case 'individual':\n        return 'Individual'\n      case 'non_profit':\n        return 'Non Profit'\n      case 'for_profit':\n        return 'For Profit'\n      case 'government_entity':\n        return 'Government Entity'\n    }\n  }\n\n  mapBusinessStructure = (type: string) => {\n    switch (type) {\n      case 'sole_proprietorship':\n        return 'Sole Proprietorship'\n      case 'single_llc':\n        return 'Single LLC'\n      case 'multi_llc':\n        return 'Multi LLC'\n      case 'private_partnership':\n        return 'Private Partnership'\n      case 'private_corporation':\n        return 'Private Corporation'\n      case 'unincorporated_association':\n        return 'Unincorporated Association'\n      case 'public_partnership':\n        return 'Public Partnership'\n      case 'public_corporation':\n        return 'Public Corporation'\n      case 'incorporated':\n        return 'Incorporated'\n      case 'unincorporated':\n        return 'Unincorporated'\n      case 'government_unit':\n        return 'Government Unit'\n      case 'government_instrumentality':\n        return 'Government Instrumentality'\n      case 'tax_exempt_government_instrumentality':\n        return 'Tax Exempt Government Instrumentality'\n    }\n  }\n\n  async fetchData(direction?: string): Promise<void> {\n    if (!this.accountId || !this.authToken) {\n      this.errorMessage = \"Can not fetch any data without an AccountID and an AuthToken\";\n      this.loading = false;\n      return;\n    }\n    this.loading = true;\n    const endpoint = `entities/business`;\n\n    const response: IApiResponseCollection<Business[]> = await Api(this.authToken, process.env.ENTITIES_API_ORIGIN).get(endpoint, {\n      account_id: this.accountId,\n      paging: this.paging,\n      direction: direction\n    });\n    if (!response.error) {\n      this.paging = {\n        ...this.paging,\n        ...response.page_info\n      }\n\n      const data = response?.data?.map(dataItem => new Business(dataItem));\n      this.businesses = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <justifi-table\n          columnData={[\n            ['Legal Name', 'The name associated with this Business'],\n            ['Business Type', 'The business type'],\n            ['Business Structure', 'The business structure'],\n            ['Tax ID', 'The tax ID associated with this business'],\n            ['Industry', 'The industry this business participates in'],\n            ['Product Ready', 'List of our products that are used by this business'],\n            ['Created at', 'Date this business was created'],\n          ]}\n          rowData={\n            this.businesses.map((business) => (\n              [\n                business.legal_name,\n                this.mapBusinessType(business.business_type),\n                this.mapBusinessStructure(business.business_structure),\n                business.tax_id,\n                business.industry,\n                {\n                  type: 'inner',\n                  value: `\n                    <div class=\"d-flex flex-nowrap gap-1\">\n                      <span class=\"badge ${this.mapProductStatusToBadge(business.product_categories.credit)}\">Credit</span>\n                      <span class=\"badge ${this.mapProductStatusToBadge(business.product_categories.insurance)}\">Insurance</span>\n                      <span class=\"badge ${this.mapProductStatusToBadge(business.product_categories.lending)}\">Lending</span>\n                      <span class=\"badge ${this.mapProductStatusToBadge(business.product_categories.payment)}\">Payment</span>\n                    </div>\n                  `\n                },\n                formatDate(business.created_at),\n              ]\n            ))\n          }\n          loading={this.loading}\n          error-message={this.errorMessage}\n          paging={{\n            ...this.paging,\n            onPrev: this.onPageChange('prev'),\n            onNext: this.onPageChange('next')\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/business-list/business-list.stories.js

@@ -0,0 +1,68 @@
+export default {
+  title: 'dev/Components/BusinessList',
+  component: 'justifi-business-list',
+  parameters: {}
+};
+class BusinessListArgs {
+  constructor(args) {
+    this['auth-token'] = args['auth-token'] || '';
+    this['account-id'] = args['account-id'] || '';
+  }
+}
+const Template = (args) => {
+  return (`
+    <justifi-business-list
+      data-testid="justifi-business-list"
+      auth-token="${args['auth-token']}"
+      account-id="${args['account-id']}"
+    />
+  `);
+};
+export const Basic = Template.bind({});
+Basic.args = new BusinessListArgs({});
+export const Styled = Template.bind({});
+Styled.args = new BusinessListArgs({});
+Styled.decorators = [
+  (Story) => `
+    ${Story()}
+    <style>
+      justifi-business-list::part(table-head-cell) {
+        background-color: #F4F4F6;
+      }
+      justifi-business-list::part(pagination-bar) {
+        background-color: #F4F4F6;
+      }
+      justifi-business-list::part(arrow) {
+        --bs-btn-disabled-bg: #212529;
+        --bs-btn-disabled-border-color: #212529;
+        --bs-btn-bg: #212529;
+        --bs-btn-border-color: #212529;
+        --bs-btn-hover-bg: #fccc32;
+        --bs-btn-hover-border-color: #fccc32;
+      }
+      justifi-business-list::part(error-state) {
+        color: red;
+        background-color: #EEEEF5;
+      }
+      justifi-business-list::part(loading-state-cell) {
+        background-color: #EEEEF5;
+      }
+      justifi-business-list::part(table-row) {
+        background-color: #EEEEF5;
+      }
+      justifi-business-list::part(table-row-even) {
+        background-color: #F4F4F6;
+      }
+    </style>
+  `
+];
+export const Contained = Template.bind({});
+Contained.decorators = [
+  (Story) => `
+    <div style="position: relative; width: 900px; height: 300px; overflow-x: hidden;">
+      ${Story()}
+    </div>
+  `
+];
+Contained.args = new BusinessListArgs({});
+//# sourceMappingURL=business-list.stories.js.map

package/dist/collection/components/business-list/business-list.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"business-list.stories.js","sourceRoot":"","sources":["../../../../src/components/business-list/business-list.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,6BAA6B;EACpC,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,gBAAgB;EAIpB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;EAChD,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAsB,EAAE,EAAE;EAC1C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,UAAU,GAAG;EACrB,CAAC,KAAK,EAAE,EAAE,CAAC;;QAEL,KAAK,EAAE;;GAEZ;CACF,CAAA;AACD,SAAS,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n  title: 'dev/Components/BusinessList',\n  component: 'justifi-business-list',\n  parameters: {}\n};\n\nclass BusinessListArgs {\n  'auth-token': string;\n  'account-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || '';\n    this['account-id'] = args['account-id'] || '';\n  }\n}\n\nconst Template = (args: BusinessListArgs) => {\n  return (`\n    <justifi-business-list\n      data-testid=\"justifi-business-list\"\n      auth-token=\"${args['auth-token']}\"\n      account-id=\"${args['account-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new BusinessListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new BusinessListArgs({});\nStyled.decorators = [\n  (Story) => `\n    ${Story()}\n    <style>\n      justifi-business-list::part(table-head-cell) {\n        background-color: #F4F4F6;\n      }\n      justifi-business-list::part(pagination-bar) {\n        background-color: #F4F4F6;\n      }\n      justifi-business-list::part(arrow) {\n        --bs-btn-disabled-bg: #212529;\n        --bs-btn-disabled-border-color: #212529;\n        --bs-btn-bg: #212529;\n        --bs-btn-border-color: #212529;\n        --bs-btn-hover-bg: #fccc32;\n        --bs-btn-hover-border-color: #fccc32;\n      }\n      justifi-business-list::part(error-state) {\n        color: red;\n        background-color: #EEEEF5;\n      }\n      justifi-business-list::part(loading-state-cell) {\n        background-color: #EEEEF5;\n      }\n      justifi-business-list::part(table-row) {\n        background-color: #EEEEF5;\n      }\n      justifi-business-list::part(table-row-even) {\n        background-color: #F4F4F6;\n      }\n    </style>\n  `\n]\n\nexport const Contained = Template.bind({});\nContained.decorators = [\n  (Story) => `\n    <div style=\"position: relative; width: 900px; height: 300px; overflow-x: hidden;\">\n      ${Story()}\n    </div>\n  `\n]\nContained.args = new BusinessListArgs({});\n"]}

package/dist/collection/components/business-list/example.js

@@ -0,0 +1,12 @@
+import { head } from '../../../storybook-pages/example-parts';
+
+export default `<!DOCTYPE html>
+<html dir="ltr" lang="en">
+
+${head('justifi-business-list')}
+
+<body>
+  <justifi-business-list></justifi-business-list>
+</body>
+
+</html>`;

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class CardForm {
   constructor() {
     this.validationMode = undefined;
@@ -7,12 +7,16 @@ export class CardForm {
     this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
+    console.warn(`The 'cardFormReady' event is deprecated in the next major release and will be renamed to 'ready'`);
     this.cardFormReady.emit(event);
+    this.ready.emit(event);
   }
   tokenizeHandler(event) {
+    console.warn(`The 'cardFormTokenize' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`);
     this.cardFormTokenize.emit(event);
   }
   validateHandler(event) {
+    console.warn(`The 'cardFormValidate' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`);
     this.cardFormValidate.emit(event);
   }
   /**
@@ -34,8 +38,8 @@ export class CardForm {
     return this.childRef.validate();
   }
   /**
-    *  Manually resizes the iframe to fit the contents of the iframe
-    */
+   *  Manually resizes the iframe to fit the contents of the iframe
+   */
   async resize() {
     if (!this.childRef) {
       throw new Error('Cannot call validate');
@@ -130,6 +134,24 @@ export class CardForm {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "ready",
+        "name": "ready",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "event",
+              "text": "justifi-card-form#ready"
+            }],
+          "text": "Triggered when iframe has loaded"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }, {
         "method": "cardFormTokenize",
         "name": "cardFormTokenize",
@@ -172,24 +194,28 @@ export class CardForm {
     return {
       "tokenize": {
         "complexType": {
-          "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<CreatePaymentMethodResponse>",
+          "signature": "(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>) => Promise<CreatePaymentMethodResponse>",
           "parameters": [{
               "tags": [],
               "text": ""
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "CreatePaymentMethodResponse": {
               "location": "import",
-              "path": "../payment-method-form/payment-method-responses"
+              "path": "../payment-method-form/payment-method-responses",
+              "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
             },
             "Parameters": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Parameters"
             },
             "HTMLJustifiPaymentMethodFormElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLJustifiPaymentMethodFormElement"
             }
           },
           "return": "Promise<CreatePaymentMethodResponse>"
@@ -205,7 +231,8 @@ export class CardForm {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<{ isValid: boolean; }>"
@@ -221,7 +248,8 @@ export class CardForm {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

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

@@ -1 +1 @@
-{"version":3,"file":"card-form.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAgB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ/F,MAAM,OAAO,QAAQ;;;;sBAcW,KAAK;;;EAuBnC,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACjC,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAID;;KAEG;EAEH,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;EACzC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;EAClC,CAAC;EAED;;MAEI;EAEJ,KAAK,CAAC,MAAM;IACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;EAChC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,mCACE,GAAG,EAAE,EAAE,CAAC,EAAE;QACR,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;MACH,CAAC,mBACc,IAAI,CAAC,YAAY,8BACP,MAAM,iBAClB,IAAI,CAAC,UAAU,+BACD,IAAI,CAAC,aAAa,kCACf,IAAI,CAAC,gBAAgB,yCACd,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,CACH,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Method, Listen, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n  tag: 'justifi-card-form',\n  shadow: false,\n})\nexport class CardForm {\n  /**\n   * When to trigger validation of the form.\n   */\n  @Prop({ mutable: true }) validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n\n  /**\n   * URL for the rendered iFrame. End-users need not use this.\n   */\n  @Prop({ mutable: true }) iframeOrigin?: string;\n\n  /**\n   * Boolean indicating if the Card Form should render in a single line\n   */\n  @Prop() singleLine: boolean = false;\n  @State() internalStyleOverrides: Theme;\n\n  /**\n   * Triggered when iframe has loaded\n   * @event justifi-card-form#cardFormReady\n   */\n\n  @Event() cardFormReady: EventEmitter;\n\n  /**\n   * Triggered when the tokenize method is called on the component\n   * @event justifi-card-form#cardFormTokenize\n   */\n  @Event() cardFormTokenize: EventEmitter<{ data: any }>;\n\n  /**\n   * Triggered when the validate method is called on the component\n   * @event justifi-card-form#cardFormTokenize\n   */\n  @Event() cardFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n  @Listen('paymentMethodFormReady')\n  readyHandler(event: CustomEvent) {\n    this.cardFormReady.emit(event);\n  }\n\n  @Listen('paymentMethodFormTokenize')\n  tokenizeHandler(event: { data: any }) {\n    this.cardFormTokenize.emit(event);\n  }\n\n  @Listen('paymentMethodFormValidate')\n  validateHandler(event: { data: any }) {\n    this.cardFormValidate.emit(event);\n  }\n\n  private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n  /**\n   *  Makes a tokenization request to the iframe\n   */\n  @Method()\n  async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n    if (!this.childRef) {\n      throw new Error('Cannot call tokenize');\n    }\n    return this.childRef.tokenize(...args);\n  }\n\n  /**\n   *  Runs a validation on the form and shows errors if any\n   */\n  @Method()\n  async validate(): Promise<{ isValid: boolean }> {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.validate();\n  }\n\n  /**\n    *  Manually resizes the iframe to fit the contents of the iframe\n    */\n  @Method()\n  async resize(): Promise<void> {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.resize();\n  }\n\n  render() {\n    return (\n      <justifi-payment-method-form\n        ref={el => {\n          if (el) {\n            this.childRef = el;\n          }\n        }}\n        iframe-origin={this.iframeOrigin}\n        payment-method-form-type=\"card\"\n        single-line={this.singleLine}\n        payment-method-form-ready={this.cardFormReady}\n        payment-method-form-tokenize={this.cardFormTokenize}\n        payment-method-form-validation-mode={this.validationMode || 'onSubmit'}\n      />\n    );\n  }\n}\n"]}
+{"version":3,"file":"card-form.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAgB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ/F,MAAM,OAAO,QAAQ;;;;sBAcW,KAAK;;;EA+BnC,YAAY,CAAC,KAAkB;IAC7B,OAAO,CAAC,IAAI,CAAC,kGAAkG,CAAC,CAAC;IACjH,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACzB,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,wMAAwM,CACzM,CAAC;IACF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,OAAO,CAAC,IAAI,CACV,wMAAwM,CACzM,CAAC;IACF,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAID;;KAEG;EAEH,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;EACzC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;EAClC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,MAAM;IACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;EAChC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,mCACE,GAAG,EAAE,EAAE,CAAC,EAAE;QACR,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;MACH,CAAC,mBACc,IAAI,CAAC,YAAY,8BACP,MAAM,iBAClB,IAAI,CAAC,UAAU,+BACD,IAAI,CAAC,aAAa,kCACf,IAAI,CAAC,gBAAgB,yCACd,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,CACH,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Method, Listen, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n  tag: 'justifi-card-form',\n  shadow: false,\n})\nexport class CardForm {\n  /**\n   * When to trigger validation of the form.\n   */\n  @Prop({ mutable: true }) validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n\n  /**\n   * URL for the rendered iFrame. End-users need not use this.\n   */\n  @Prop({ mutable: true }) iframeOrigin?: string;\n\n  /**\n   * Boolean indicating if the Card Form should render in a single line\n   */\n  @Prop() singleLine: boolean = false;\n\n  @State() internalStyleOverrides: Theme;\n\n  /**\n   * Triggered when iframe has loaded\n   * @event justifi-card-form#cardFormReady\n   */\n\n  @Event() cardFormReady: EventEmitter;\n\n  /**\n   * Triggered when iframe has loaded\n   * @event justifi-card-form#ready\n   */\n\n  @Event() ready: EventEmitter;\n\n  /**\n   * Triggered when the tokenize method is called on the component\n   * @event justifi-card-form#cardFormTokenize\n   */\n  @Event() cardFormTokenize: EventEmitter<{ data: any }>;\n\n  /**\n   * Triggered when the validate method is called on the component\n   * @event justifi-card-form#cardFormTokenize\n   */\n  @Event() cardFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n  @Listen('paymentMethodFormReady')\n  readyHandler(event: CustomEvent) {\n    console.warn(`The 'cardFormReady' event is deprecated in the next major release and will be renamed to 'ready'`);\n    this.cardFormReady.emit(event);\n    this.ready.emit(event);\n  }\n\n  @Listen('paymentMethodFormTokenize')\n  tokenizeHandler(event: { data: any }) {\n    console.warn(\n      `The 'cardFormTokenize' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n    );\n    this.cardFormTokenize.emit(event);\n  }\n\n  @Listen('paymentMethodFormValidate')\n  validateHandler(event: { data: any }) {\n    console.warn(\n      `The 'cardFormValidate' event is deprecated in the next major release. Please refer to the documentation for the migration process and alternative approach. This method will be removed in the future.`,\n    );\n    this.cardFormValidate.emit(event);\n  }\n\n  private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n  /**\n   *  Makes a tokenization request to the iframe\n   */\n  @Method()\n  async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n    if (!this.childRef) {\n      throw new Error('Cannot call tokenize');\n    }\n    return this.childRef.tokenize(...args);\n  }\n\n  /**\n   *  Runs a validation on the form and shows errors if any\n   */\n  @Method()\n  async validate(): Promise<{ isValid: boolean }> {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.validate();\n  }\n\n  /**\n   *  Manually resizes the iframe to fit the contents of the iframe\n   */\n  @Method()\n  async resize(): Promise<void> {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.resize();\n  }\n\n  render() {\n    return (\n      <justifi-payment-method-form\n        ref={el => {\n          if (el) {\n            this.childRef = el;\n          }\n        }}\n        iframe-origin={this.iframeOrigin}\n        payment-method-form-type=\"card\"\n        single-line={this.singleLine}\n        payment-method-form-ready={this.cardFormReady}\n        payment-method-form-tokenize={this.cardFormTokenize}\n        payment-method-form-validation-mode={this.validationMode || 'onSubmit'}\n      />\n    );\n  }\n}\n"]}

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

@@ -95,11 +95,13 @@ SingleLine.args = {
   'single-line': true,
 };
 const styledVariables = `
+  --jfi-load-google-font: 'Inter:wght@200;400;700;900&family=Agdasima';
+  --jfi-layout-font-family: Agdasima;
   --jfi-layout-padding: 4px;
   --jfi-layout-form-control-spacing-x: .5rem;
   --jfi-layout-form-control-spacing-y: 1rem;
-  --jfi-form-label-font-weight: 700;
-  --jfi-form-label-font-family: sans-serif;
+  --jfi-form-label-font-weight: 100;
+  --jfi-form-label-font-family: Inter;
   --jfi-form-label-margin: 0 0 .5rem 0;
   --jfi-form-control-background-color: #F4F4F6;
   --jfi-form-control-background-color-hover: #EEEEF5;
@@ -129,6 +131,7 @@ const styledVariables = `
 `;
 export const Styled = Template.bind({});
 Styled.args = {
+  'single-line': false,
   'css-variables': styledVariables,
 };
 //# sourceMappingURL=card-form.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card-form.stories.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.stories.ts"],"names":[],"mappings":"AAOA,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC;AAErD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,SAAS,EAAE,mBAAmB;EAC9B,QAAQ,EAAE;IACR,eAAe,EAAE;MACf,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;QAC7B,QAAQ,EAAE,OAAO;OAClB;KACF;GACF;EACD,UAAU,EAAE;IACV,KAAK,CAAC,EAAE,CAAC;QACL,KAAK,EAAE;gBACC,SAAS,EAAE;KACtB;GACF;CACF,CAAC;AAEF,MAAM,mBAAmB,GAAG,KAAK,EAAE,QAAoC,EAAE,EAAE;EACzE,MAAM,KAAK,GAAG,MAAM,QAAQ,CAAC,QAAQ,EAAE,CAAC;EACxC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AACrB,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,KAAK,EAAE,QAAoC,EAAE,iBAAiB,EAAE,EAAE;EAC5F,MAAM,gBAAgB,GAAG,MAAM,QAAQ,CAAC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;EACjF,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAChC,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,KAAK,EAAE,QAAoC,EAAE,EAAE;EACvE,MAAM,QAAQ,CAAC,MAAM,EAAE,CAAC;AAC1B,CAAC,CAAC;AACF,MAAM,WAAW,GAAG,GAAG,EAAE;EACvB,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;EAClC,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAA+B,CAAC;EAC3F,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC5D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC5D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EACxD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1C,mBAAmB,CAAC,QAAQ,CAAC,CAAC;EAChC,CAAC,CAAC,CAAC;EACH,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1C,mBAAmB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;EACpC,CAAC,CAAC,CAAC;EACH,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IACxC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;EAC9B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;EACrB,gBAAgB,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AACjD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;SAiBX,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAuB,EAAE,EAAE;EAC3C,MAAM,cAAc,GAAG,IAAI,CAAC;EAE5B,OAAO;;;;UAIC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;;;;;2BAKV,IAAI,CAAC,iBAAiB,CAAC,IAAI,UAAU;yBACvC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;uBAC7B,IAAI,CAAC,aAAa,CAAC;;;MAGpC,cAAc,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;GACpC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;EACX,iBAAiB,EAAE,UAAU;EAC7B,aAAa,EAAE,KAAK;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;EAChB,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCvB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,eAAe,EAAE,eAAe;CACjC,CAAC","sourcesContent":["interface CardFormStoryArgs {\n  'iframe-origin': string;\n  'single-line': boolean;\n  'validation-mode': string;\n  'css-variables': string;\n}\n\nconst isDev = process.env.NODE_ENV === 'development';\n\nexport default {\n  title: 'Components/CardForm',\n  component: 'justifi-card-form',\n  argTypes: {\n    'iframe-origin': {\n      control: 'text',\n      table: {\n        disable: isDev ? false : true,\n        category: 'props',\n      },\n    },\n  },\n  decorators: [\n    story => `\n      ${story()}\n      <script>${addEvents()}</script>\n    `,\n  ],\n};\n\nconst handleValidateClick = async (cardForm: HTMLJustifiCardFormElement) => {\n  const valid = await cardForm.validate();\n  console.log(valid);\n};\nconst handleTokenizeClick = async (cardForm: HTMLJustifiCardFormElement, paymentMethodData) => {\n  const tokenizeResponse = await cardForm.tokenize('CLIENT_ID', paymentMethodData);\n  console.log(tokenizeResponse);\n};\nconst handleResizeClick = async (cardForm: HTMLJustifiCardFormElement) => {\n  await cardForm.resize();\n};\nconst handleReady = () => {\n  console.log('card form is ready');\n  const cardForm = document.querySelector('justifi-card-form') as HTMLJustifiCardFormElement;\n  const validateBtn = document.querySelector('#validate-btn');\n  const tokenizeBtn = document.querySelector('#tokenize-btn');\n  const resizeBtn = document.querySelector('#resize-btn');\n  validateBtn?.addEventListener('click', () => {\n    handleValidateClick(cardForm);\n  });\n  tokenizeBtn?.addEventListener('click', () => {\n    handleTokenizeClick(cardForm, {});\n  });\n  resizeBtn?.addEventListener('click', () => {\n    handleResizeClick(cardForm);\n  });\n};\n\nconst addEvents = () => {\n  addEventListener('cardFormReady', handleReady);\n};\n\nconst FormButtons = `\n  <style>\n    .button-bar {\n      display: flex;\n      aligin-items: center;\n      padding: 10px;\n    }\n    .button-bar button {\n      margin-right: 10px;\n      border-radius: 3px;\n      border: 1px solid black;\n    }\n  </style>\n  <div class=\"button-bar\">\n    <button id=\"validate-btn\">Validate</button>\n    <button id=\"tokenize-btn\">Tokenize</button>\n    <button id=\"resize-btn\">Resize</button>\n  </div>`;\n\nconst Template = (args: CardFormStoryArgs) => {\n  const includeButtons = true;\n\n  return `\n    <div>\n      <style>\n      :root {\n        ${args['css-variables'] || ''}\n      }\n      </style>\n      <justifi-card-form\n        data-testid=\"card-form-iframe\"\n        validation-mode='${args['validation-mode'] || 'onSubmit'}'\n        iframe-origin='${args['iframe-origin'] || ''}'\n        single-line='${args['single-line']}'\n      />\n    </div>\n    ${includeButtons ? FormButtons : ''}\n  `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n  'validation-mode': 'onSubmit',\n  'single-line': false,\n};\n\nexport const SingleLine = Template.bind({});\nSingleLine.args = {\n  'single-line': true,\n};\n\nconst styledVariables = `\n  --jfi-layout-padding: 4px;\n  --jfi-layout-form-control-spacing-x: .5rem;\n  --jfi-layout-form-control-spacing-y: 1rem;\n  --jfi-form-label-font-weight: 700;\n  --jfi-form-label-font-family: sans-serif;\n  --jfi-form-label-margin: 0 0 .5rem 0;\n  --jfi-form-control-background-color: #F4F4F6;\n  --jfi-form-control-background-color-hover: #EEEEF5;\n  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n  --jfi-form-control-border-color-focus: #fccc32;\n  --jfi-form-control-border-color-error: #C12727;\n  --jfi-form-control-border-top-width: 0;\n  --jfi-form-control-border-left-width: 0;\n  --jfi-form-control-border-bottom-width: 1px;\n  --jfi-form-control-border-right-width: 0;\n  --jfi-form-control-border-radius: 4px 4px 0 0;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  --jfi-form-control-box-shadow-focus: none;\n  --jfi-form-control-box-shadow-error-focus: none;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-color: #212529;\n  --jfi-form-control-font-size: 1rem;\n  --jfi-form-control-font-weight: 400;\n  --jfi-form-control-line-height: 2;\n  --jfi-form-control-margin: 0;\n  --jfi-form-control-padding: .5rem .875rem;\n  --jfi-error-message-color: #C12727;\n  --jfi-error-message-margin: .25rem 0 0 0;\n  --jfi-error-message-font-size: .875rem;\n`;\n\nexport const Styled = Template.bind({});\nStyled.args = {\n  'css-variables': styledVariables,\n};\n"]}
+{"version":3,"file":"card-form.stories.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.stories.ts"],"names":[],"mappings":"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","sourcesContent":["interface CardFormStoryArgs {\n  'iframe-origin': string;\n  'single-line': boolean;\n  'validation-mode': string;\n  'css-variables': string;\n}\n\nconst isDev = process.env.NODE_ENV === 'development';\n\nexport default {\n  title: 'Components/CardForm',\n  component: 'justifi-card-form',\n  argTypes: {\n    'iframe-origin': {\n      control: 'text',\n      table: {\n        disable: isDev ? false : true,\n        category: 'props',\n      },\n    },\n  },\n  decorators: [\n    story => `\n      ${story()}\n      <script>${addEvents()}</script>\n    `,\n  ],\n};\n\nconst handleValidateClick = async (cardForm: HTMLJustifiCardFormElement) => {\n  const valid = await cardForm.validate();\n  console.log(valid);\n};\nconst handleTokenizeClick = async (cardForm: HTMLJustifiCardFormElement, paymentMethodData) => {\n  const tokenizeResponse = await cardForm.tokenize('CLIENT_ID', paymentMethodData);\n  console.log(tokenizeResponse);\n};\nconst handleResizeClick = async (cardForm: HTMLJustifiCardFormElement) => {\n  await cardForm.resize();\n};\nconst handleReady = () => {\n  console.log('card form is ready');\n  const cardForm = document.querySelector('justifi-card-form') as HTMLJustifiCardFormElement;\n  const validateBtn = document.querySelector('#validate-btn');\n  const tokenizeBtn = document.querySelector('#tokenize-btn');\n  const resizeBtn = document.querySelector('#resize-btn');\n  validateBtn?.addEventListener('click', () => {\n    handleValidateClick(cardForm);\n  });\n  tokenizeBtn?.addEventListener('click', () => {\n    handleTokenizeClick(cardForm, {});\n  });\n  resizeBtn?.addEventListener('click', () => {\n    handleResizeClick(cardForm);\n  });\n};\n\nconst addEvents = () => {\n  addEventListener('cardFormReady', handleReady);\n};\n\nconst FormButtons = `\n  <style>\n    .button-bar {\n      display: flex;\n      aligin-items: center;\n      padding: 10px;\n    }\n    .button-bar button {\n      margin-right: 10px;\n      border-radius: 3px;\n      border: 1px solid black;\n    }\n  </style>\n  <div class=\"button-bar\">\n    <button id=\"validate-btn\">Validate</button>\n    <button id=\"tokenize-btn\">Tokenize</button>\n    <button id=\"resize-btn\">Resize</button>\n  </div>`;\n\nconst Template = (args: CardFormStoryArgs) => {\n  const includeButtons = true;\n\n  return `\n    <div>\n      <style>\n      :root {\n        ${args['css-variables'] || ''}\n      }\n      </style>\n      <justifi-card-form\n        data-testid=\"card-form-iframe\"\n        validation-mode='${args['validation-mode'] || 'onSubmit'}'\n        iframe-origin='${args['iframe-origin'] || ''}'\n        single-line='${args['single-line']}'\n      />\n    </div>\n    ${includeButtons ? FormButtons : ''}\n  `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n  'validation-mode': 'onSubmit',\n  'single-line': false,\n};\n\nexport const SingleLine = Template.bind({});\nSingleLine.args = {\n  'single-line': true,\n};\n\nconst styledVariables = `\n  --jfi-load-google-font: 'Inter:wght@200;400;700;900&family=Agdasima';\n  --jfi-layout-font-family: Agdasima;\n  --jfi-layout-padding: 4px;\n  --jfi-layout-form-control-spacing-x: .5rem;\n  --jfi-layout-form-control-spacing-y: 1rem;\n  --jfi-form-label-font-weight: 100;\n  --jfi-form-label-font-family: Inter;\n  --jfi-form-label-margin: 0 0 .5rem 0;\n  --jfi-form-control-background-color: #F4F4F6;\n  --jfi-form-control-background-color-hover: #EEEEF5;\n  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n  --jfi-form-control-border-color-focus: #fccc32;\n  --jfi-form-control-border-color-error: #C12727;\n  --jfi-form-control-border-top-width: 0;\n  --jfi-form-control-border-left-width: 0;\n  --jfi-form-control-border-bottom-width: 1px;\n  --jfi-form-control-border-right-width: 0;\n  --jfi-form-control-border-radius: 4px 4px 0 0;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  --jfi-form-control-box-shadow-focus: none;\n  --jfi-form-control-box-shadow-error-focus: none;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-color: #212529;\n  --jfi-form-control-font-size: 1rem;\n  --jfi-form-control-font-weight: 400;\n  --jfi-form-control-line-height: 2;\n  --jfi-form-control-margin: 0;\n  --jfi-form-control-padding: .5rem .875rem;\n  --jfi-error-message-color: #C12727;\n  --jfi-error-message-margin: .25rem 0 0 0;\n  --jfi-error-message-font-size: .875rem;\n`;\n\nexport const Styled = Template.bind({});\nStyled.args = {\n  'single-line': false,\n  'css-variables': styledVariables,\n};\n"]}

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

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('justifi-card-form', () => {
   it('should emit "cardFormReady" event when "paymentMethodFormReady" event is fired', async () => {
     const page = await newE2EPage();

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

@@ -1,6 +1,6 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { CardForm } from '../card-form';
-import { PaymentMethodForm } from '../../payment-method-form/payment-method-form';
+import { newSpecPage } from "@stencil/core/testing";
+import { CardForm } from "../card-form";
+import { PaymentMethodForm } from "../../payment-method-form/payment-method-form";
 describe('justifi-card-form', () => {
   it('should pass validationMode prop to justifi-payment-method-form', async () => {
     const page = await newSpecPage({