@justifi/webcomponents 4.2.1-rc.4 → 4.4.0

package/dist/collection/components/business-form/business-representative/business-representative.js

@@ -0,0 +1,76 @@
+import { Host, h } from "@stencil/core";
+export class BusinessRepresentative {
+  constructor() {
+    this.formController = undefined;
+    this.errors = {};
+    this.defaultValues = {};
+    this.representative = {};
+  }
+  handleRepresentativeChange(newValue) {
+    this.formController.setValues({ representative: newValue });
+  }
+  componentDidLoad() {
+    this.formController.errors.subscribe((errors) => this.errors = Object.assign({}, errors.representative));
+    this.formController.defaultValues.subscribe((defaultValues) => this.defaultValues = Object.assign({}, defaultValues.representative));
+  }
+  inputHandler(name, value) {
+    this.representative = Object.assign(Object.assign({}, this.representative), { [name]: value });
+  }
+  ;
+  onAddressFormUpdate(values) {
+    this.representative = Object.assign(Object.assign({}, this.representative), { address: values });
+  }
+  render() {
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Representative"), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: this.defaultValues.name, error: this.errors.name, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-4" }, h("form-control-select", { name: "title", label: "Prefix", defaultValue: this.defaultValues.title, options: [{ label: 'Select Prefix', value: '' }, { label: 'Mrs.', value: 'Mrs.' }], error: this.errors.title, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: this.defaultValues.email, error: this.errors.email, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("form-control-text", { name: "phone", label: "Phone Number", defaultValue: this.defaultValues.phone, error: this.errors.phone, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("label", { part: "label", class: "form-label" }, "Birth Date")), h("div", { class: "col-4" }, h("form-control-text", { name: "dob_day", label: "Day", defaultValue: this.defaultValues.dob_day, error: this.errors.dob_day, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-4" }, h("form-control-text", { name: "dob_month", label: "Month", defaultValue: this.defaultValues.dob_month, error: this.errors.dob_month, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-4" }, h("form-control-text", { name: "dob_year", label: "Year", defaultValue: this.defaultValues.dob_year, error: this.errors.dob_year, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("form-control-text", { name: "identification_number", label: "EIN/SSN", defaultValue: this.defaultValues.identification_number, error: this.errors.identification_number, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("justifi-business-address-form", { errors: this.errors.address, defaultValues: this.defaultValues.address, onFormUpdate: (values) => this.onAddressFormUpdate(values) }))))));
+  }
+  static get is() { return "justifi-business-representative"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["business-representative.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["business-representative.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "formController": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "FormController",
+          "resolved": "FormController",
+          "references": {
+            "FormController": {
+              "location": "import",
+              "path": "../../form/form",
+              "id": "src/components/form/form.ts::FormController"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "errors": {},
+      "defaultValues": {},
+      "representative": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "representative",
+        "methodName": "handleRepresentativeChange"
+      }];
+  }
+}
+//# sourceMappingURL=business-representative.js.map

package/dist/collection/components/business-form/business-representative/business-representative.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"business-representative.js","sourceRoot":"","sources":["../../../../../src/components/business-form/business-representative/business-representative.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { FormController } from '../../form/form';\n\n@Component({\n  tag: 'justifi-business-representative',\n  styleUrl: 'business-representative.scss',\n  shadow: false,\n})\nexport class BusinessRepresentative {\n  @Prop() formController: FormController\n  @State() errors: any = {};\n  @State() defaultValues: any = {};\n  @State() representative: any = {};\n\n  @Watch('representative')\n  handleRepresentativeChange(newValue: any) {\n    this.formController.setValues({ representative: newValue });\n  }\n\n  componentDidLoad() {\n    this.formController.errors.subscribe((errors) => this.errors = { ...errors.representative });\n    this.formController.defaultValues.subscribe((defaultValues) => this.defaultValues = { ...defaultValues.representative });\n  }\n\n  inputHandler(name: string, value: string) {\n    this.representative = { ...this.representative, [name]: value };\n  };\n\n  onAddressFormUpdate(values: any): void {\n    this.representative = { ...this.representative, address: values };\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <fieldset>\n          <legend>Representative</legend>\n          <div class=\"row gx-2 gy-2\">\n            <div class=\"col-8\">\n              <form-control-text\n                name=\"name\"\n                label=\"Full Name\"\n                defaultValue={this.defaultValues.name}\n                error={this.errors.name}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-4\">\n              <form-control-select\n                name=\"title\"\n                label=\"Prefix\"\n                defaultValue={this.defaultValues.title}\n                options={[{ label: 'Select Prefix', value: '' }, { label: 'Mrs.', value: 'Mrs.' }]}\n                error={this.errors.title}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-12\">\n              <form-control-text\n                name=\"email\"\n                label=\"Email Address\"\n                defaultValue={this.defaultValues.email}\n                error={this.errors.email}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-12\">\n              <form-control-text\n                name=\"phone\"\n                label=\"Phone Number\"\n                defaultValue={this.defaultValues.phone}\n                error={this.errors.phone}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-12\">\n              <label part=\"label\" class=\"form-label\">Birth Date</label>\n            </div>\n\n            <div class=\"col-4\">\n              <form-control-text\n                name=\"dob_day\"\n                label=\"Day\"\n                defaultValue={this.defaultValues.dob_day}\n                error={this.errors.dob_day}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-4\">\n              <form-control-text\n                name=\"dob_month\"\n                label=\"Month\"\n                defaultValue={this.defaultValues.dob_month}\n                error={this.errors.dob_month}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-4\">\n              <form-control-text\n                name=\"dob_year\"\n                label=\"Year\"\n                defaultValue={this.defaultValues.dob_year}\n                error={this.errors.dob_year}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-12\">\n              <form-control-text\n                name=\"identification_number\"\n                label=\"EIN/SSN\"\n                defaultValue={this.defaultValues.identification_number}\n                error={this.errors.identification_number}\n                inputHandler={(name, value) => this.inputHandler(name, value)} />\n            </div>\n\n            <div class=\"col-12\">\n              <justifi-business-address-form\n                errors={this.errors.address}\n                defaultValues={this.defaultValues.address}\n                onFormUpdate={(values) => this.onAddressFormUpdate(values)} />\n            </div>\n          </div>\n        </fieldset>\n      </Host >\n    );\n  }\n\n}\n"]}

package/dist/collection/components/business-form/businessForm.stories.js

@@ -0,0 +1,115 @@
+export default {
+  title: 'Components/BusinessForm',
+  component: 'justifi-business-form',
+  argTypes: {
+    'auth-token': {
+      control: 'text',
+      table: {
+        category: 'props',
+      },
+    },
+    'business-id': {
+      control: 'text',
+      table: {
+        category: 'props',
+      },
+    },
+  },
+};
+const Template = (args) => {
+  // The <div> here should be replaced by a `display` property in the cardForm potentially
+  return `
+    <div>
+      <justifi-business-form
+        auth-token=${args['authToken']}
+        business-id='${args['business-id']}'
+      />
+    </div>
+    <style>
+      :root {
+        ${args.cssVariables}
+      }
+    </style>
+  `;
+};
+export const Basic = Template.bind({});
+Basic.args = {
+  'auth-token': 'authtoken',
+  'business-id': 'businessid',
+};
+export const Styled = Template.bind({});
+Styled.args = {
+  'auth-token': 'authtoken',
+  'business-id': 'businessid',
+  'cssVariables': `
+  --jfi-primary-color: #212529;
+  --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';
+  --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;
+  --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: Calibri, sans-serif;
+  --jfi-form-label-margin: 0 0 .5rem 0;
+  --jfi-form-control-background-color: #F4F4F6;
+  --jfi-form-control-background-color-hover: #EEEEF5;
+  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);
+  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);
+  --jfi-form-control-border-color-focus: #fccc32;
+  --jfi-form-control-border-color-error: #C12727;
+  --jfi-form-control-border-top-width: 0;
+  --jfi-form-control-border-left-width: 0;
+  --jfi-form-control-border-bottom-width: 1px;
+  --jfi-form-control-border-right-width: 0;
+  --jfi-form-control-border-radius: 4px 4px 0 0;
+  --jfi-form-control-border-style: solid;
+  --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  --jfi-form-control-box-shadow-focus: none;
+  --jfi-form-control-box-shadow-error-focus: none;
+  --jfi-form-control-border-style: solid;
+  --jfi-form-control-color: #212529;
+  --jfi-form-control-font-size: 1rem;
+  --jfi-form-control-font-weight: 400;
+  --jfi-form-control-line-height: 2;
+  --jfi-form-control-margin: 0;
+  --jfi-form-control-padding: .5rem .875rem;
+  --jfi-error-message-color: #C12727;
+  --jfi-error-message-margin: .25rem 0 0 0;
+  --jfi-error-message-font-size: .875rem;
+
+  --jfi-submit-button-color: white;
+  --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: 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);
+  --jfi-submit-button-color-focus: white;
+  --jfi-submit-button-background-color-focus: var(--jfi-primary-color);
+  --jfi-submit-button-border-color-focus: var(--jfi-primary-color);
+  --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;
+  --jfi-radio-button-color-selected: white;
+  --jfi-radio-button-background-color-selected: var(--jfi-primary-color);
+  --jfi-radio-button-border-color: var(--jfi-primary-color);
+  --jfi-radio-button-border-color-selected: var(--jfi-primary-color);
+  --jfi-radio-button-padding: 0.375rem 0.75rem;
+  --jfi-radio-button-font-size: 1rem;
+  --jfi-radio-button-color-hover: var(--jfi-primary-color);
+  --jfi-radio-button-color-selected-hover: white;
+  --jfi-radio-button-background-color-hover: transparent;
+  --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%;
+  `,
+};
+//# sourceMappingURL=businessForm.stories.js.map

package/dist/collection/components/business-form/businessForm.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"businessForm.stories.js","sourceRoot":"","sources":["../../../../src/components/business-form/businessForm.stories.tsx"],"names":[],"mappings":"AAMA,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,SAAS,EAAE,uBAAuB;EAClC,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;KACF;IACD,aAAa,EAAE;MACb,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA2B,EAAE,EAAE;EAC/C,wFAAwF;EACxF,OAAO;;;qBAGY,IAAI,CAAC,WAAW,CAAC;uBACf,IAAI,CAAC,aAAa,CAAC;;;;;UAKhC,IAAI,CAAC,YAAY;;;GAGxB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;EACX,YAAY,EAAE,WAAW;EACzB,aAAa,EAAE,YAAY;CAC5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,YAAY,EAAE,WAAW;EACzB,aAAa,EAAE,YAAY;EAC3B,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEf;CACF,CAAC","sourcesContent":["interface BusinessFormStoryArgs {\n  authToken: string;\n  businessId: string;\n  cssVariables: string;\n}\n\nexport default {\n  title: 'Components/BusinessForm',\n  component: 'justifi-business-form',\n  argTypes: {\n    'auth-token': {\n      control: 'text',\n      table: {\n        category: 'props',\n      },\n    },\n    'business-id': {\n      control: 'text',\n      table: {\n        category: 'props',\n      },\n    },\n  },\n};\n\nconst Template = (args: BusinessFormStoryArgs) => {\n  // The <div> here should be replaced by a `display` property in the cardForm potentially\n  return `\n    <div>\n      <justifi-business-form\n        auth-token=${args['authToken']}\n        business-id='${args['business-id']}'\n      />\n    </div>\n    <style>\n      :root {\n        ${args.cssVariables}\n      }\n    </style>\n  `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n  'auth-token': 'authtoken',\n  'business-id': 'businessid',\n};\n\nexport const Styled = Template.bind({});\nStyled.args = {\n  'auth-token': 'authtoken',\n  'business-id': 'businessid',\n  'cssVariables': `\n  --jfi-primary-color: #212529;\n  --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';\n  --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;\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: Calibri, 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  --jfi-submit-button-color: white;\n  --jfi-submit-button-background-color: #3F3F47;\n  --jfi-submit-button-border-color: var(--jfi-primary-color);\n  --jfi-submit-button-padding: 0.375rem 0.75rem;\n  --jfi-submit-button-font-size: 1rem;\n  --jfi-submit-button-border-radius: 1px;\n  --jfi-submit-button-color-hover: white;\n  --jfi-submit-button-background-color-hover: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-hover: var(--jfi-primary-color);\n  --jfi-submit-button-color-focus: white;\n  --jfi-submit-button-background-color-focus: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-focus: var(--jfi-primary-color);\n  --jfi-submit-button-color-active: white;\n  --jfi-submit-button-background-color-active: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-active: var(--jfi-primary-color);\n  --jfi-submit-button-width: 100%;\n  --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;\n\n  --jfi-radio-button-color: var(--jfi-primary-color);\n  --jfi-radio-button-background-color: transparent;\n  --jfi-radio-button-color-selected: white;\n  --jfi-radio-button-background-color-selected: var(--jfi-primary-color);\n  --jfi-radio-button-border-color: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-selected: var(--jfi-primary-color);\n  --jfi-radio-button-padding: 0.375rem 0.75rem;\n  --jfi-radio-button-font-size: 1rem;\n  --jfi-radio-button-color-hover: var(--jfi-primary-color);\n  --jfi-radio-button-color-selected-hover: white;\n  --jfi-radio-button-background-color-hover: transparent;\n  --jfi-radio-button-background-color-selected-hover: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-selected-hover: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-hover: var(--jfi-primary-color);\n  --jfi-radio-button-group-width: 100%;\n  `,\n};\n"]}

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":"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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-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":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCvB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,aAAa,EAAE,KAAK;EACpB,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-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({