@justifi/webcomponents 4.0.5 → 4.2.0-rc.0

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

@@ -65,6 +65,9 @@ export class PaymentMethodForm {
   async validate() {
     return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);
   }
+  async resize() {
+    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);
+  }
   composeQueryParams(values) {
     const queryParams = values.map(value => {
       if (value === values[0]) {
@@ -77,8 +80,7 @@ export class PaymentMethodForm {
     return queryParams.join('');
   }
   getIframeSrc() {
-    const productionIframeOrigin = 'https://js.justifi.ai/v2';
-    const iframeOrigin = this.iframeOrigin || productionIframeOrigin;
+    const iframeOrigin = this.iframeOrigin || process.env.IFRAME_ORIGIN;
     let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
     let paramsList = [];
     if (this.paymentMethodFormValidationMode) {
@@ -259,7 +261,24 @@ export class PaymentMethodForm {
           "text": "",
           "tags": []
         }
+      },
+      "resize": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }
 }
+//# sourceMappingURL=payment-method-form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"payment-method-form.js","sourceRoot":"","sources":["../../../../src/components/payment-method-form/payment-method-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Host, Prop, h, EventEmitter, Method, State } from '@stencil/core';\nimport { MessageEventType } from './message-event-types';\nimport { Theme } from './theme';\nimport packageJson from '../../../package.json';\nimport getComputedTheme from './get-computed-theme';\nimport { CreatePaymentMethodResponse } from './payment-method-responses';\n\n@Component({\n  tag: 'justifi-payment-method-form',\n  styleUrl: 'payment-method-form.css',\n  shadow: false,\n})\nexport class PaymentMethodForm {\n  @Prop() paymentMethodFormType: 'card' | 'bankAccount';\n  @Prop({\n    mutable: true,\n  })\n  paymentMethodFormValidationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n  @Prop() iframeOrigin?: string;\n  @Prop() singleLine: boolean;\n  @Event({ bubbles: true }) paymentMethodFormReady: EventEmitter;\n  @Event({ bubbles: true }) paymentMethodFormTokenize: EventEmitter<{ data: any }>;\n  @State() height: number = 55;\n\n  private computedTheme: Theme = getComputedTheme();\n\n  iframeElement!: HTMLIFrameElement;\n\n  connectedCallback() {\n    window.addEventListener('message', this.dispatchMessageEvent.bind(this));\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));\n  }\n\n  componentShouldUpdate() {\n    this.sendStyleOverrides();\n  }\n\n  sendStyleOverrides() {\n    if (this.computedTheme) {\n      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });\n    }\n  }\n\n  private dispatchMessageEvent(messageEvent: MessageEvent) {\n    const messagePayload = messageEvent.data;\n    const messageType = messagePayload.eventType;\n    const messageData = messagePayload.data;\n\n    if (messageType === MessageEventType[this.paymentMethodFormType].ready) {\n      this.paymentMethodFormReady.emit(messageData);\n    }\n\n    if (messageType === MessageEventType[this.paymentMethodFormType].resize) {\n      this.height = messageData.height;\n    }\n  }\n\n  private postMessage(eventType: string, payload?: any) {\n    this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, '*');\n  }\n\n  private async postMessageWithResponseListener(eventType: string, payload?: any): Promise<any> {\n    return new Promise(resolve => {\n      const responseListener = (event: MessageEvent) => {\n        if (event.data.eventType !== eventType) return;\n        window.removeEventListener('message', responseListener);\n        resolve(event.data.data);\n      };\n      window.addEventListener('message', responseListener);\n      this.postMessage(eventType, payload);\n    });\n  }\n\n  @Method()\n  async tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse> {\n    const eventType = MessageEventType[this.paymentMethodFormType].tokenize;\n    const payload = {\n      clientId: clientId,\n      componentVersion: packageJson.version,\n      paymentMethodMetadata: paymentMethodMetadata,\n      account: account,\n    };\n\n    return this.postMessageWithResponseListener(eventType, payload);\n  }\n\n  @Method()\n  async validate(): Promise<any> {\n    return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);\n  }\n\n  @Method()\n  async resize(): Promise<any> {\n    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);\n  }\n\n  private composeQueryParams(values: string[]) {\n    const queryParams = values.map(value => {\n      if (value === values[0]) {\n        return (value = `?${value}`);\n      } else {\n        return (value = `&${value}`);\n      }\n    });\n    return queryParams.join('');\n  }\n\n  private getIframeSrc() {\n    const iframeOrigin = this.iframeOrigin || process.env.IFRAME_ORIGIN;\n    let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;\n    let paramsList = [];\n    if (this.paymentMethodFormValidationMode) {\n      paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);\n    }\n    if (this.singleLine) {\n      paramsList.push(`singleLine=${this.singleLine}`);\n    }\n\n    return iframeSrc.concat(this.composeQueryParams(paramsList));\n  }\n\n  render() {\n    return (\n      <Host>\n        <iframe\n          id={`justifi-payment-method-form-${this.paymentMethodFormType}`}\n          src={this.getIframeSrc()}\n          ref={el => (this.iframeElement = el as HTMLIFrameElement)}\n          height={this.height}\n        ></iframe>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=payment-method-responses.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"payment-method-responses.js","sourceRoot":"","sources":["../../../../src/components/payment-method-form/payment-method-responses.ts"],"names":[],"mappings":"","sourcesContent":["interface PaymentMethodCreateResponseWrapper {\n  id: string;\n  type: 'payment_method';\n  error?: {\n    code: string;\n    message: string;\n  };\n  page_info: string;\n}\n\ninterface CardCreateResponse extends PaymentMethodCreateResponseWrapper {\n  data?: {\n    signature: string;\n    customer_id: string;\n    account_id: string;\n    card: {\n      id: string;\n      name: string;\n      acct_last_four: number;\n      brand: string;\n      token: string;\n      month: string;\n      year: string;\n      metadata: any;\n      address_line1_check: string;\n      address_postal_code_check: string;\n    };\n  };\n}\n\ninterface BankAccountCreateResponse extends PaymentMethodCreateResponseWrapper {\n  data?: {\n    signature: string;\n    customer_id: string;\n    account_id: string;\n    bank_account: {\n      id: string;\n      account_owner_name: string;\n      account_type: 'checking' | 'savings';\n      bank_name: string;\n      acct_last_four: number;\n      token: string;\n      metadata: any;\n    };\n  };\n}\n\nexport type CreatePaymentMethodResponse = CardCreateResponse | BankAccountCreateResponse;\n"]}

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

@@ -0,0 +1,22 @@
+import { newE2EPage } from '@stencil/core/testing';
+it('should emit "paymentMethodFormReady" when conditions are met', async () => {
+  const page = await newE2EPage();
+  await page.setContent('<justifi-card-form></justifi-card-form>');
+  const cardFormElement = await page.find('justifi-card-form');
+  const paymentFormElement = await page.find('justifi-payment-method-form');
+  const readyEventSpy = await cardFormElement.spyOnEvent('cardFormReady');
+  paymentFormElement.triggerEvent('paymentMethodFormReady');
+  await page.waitForChanges();
+  expect(readyEventSpy).toHaveReceivedEventTimes(1);
+});
+it('should emit "paymentMethodFormTokenize" when conditions are met', async () => {
+  const page = await newE2EPage();
+  await page.setContent('<justifi-card-form></justifi-card-form>');
+  const cardFormElement = await page.find('justifi-card-form');
+  const paymentFormElement = await page.find('justifi-payment-method-form');
+  const tokenizeEventSpy = await cardFormElement.spyOnEvent('cardFormTokenize');
+  paymentFormElement.triggerEvent('paymentMethodFormTokenize');
+  await page.waitForChanges();
+  expect(tokenizeEventSpy).toHaveReceivedEventTimes(1);
+});
+//# sourceMappingURL=payment-method-form.e2e.js.map

package/dist/collection/components/payment-method-form/test/payment-method-form.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-method-form.e2e.js","sourceRoot":"","sources":["../../../../../src/components/payment-method-form/test/payment-method-form.e2e.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,EAAE,CAAC,8DAA8D,EAAE,KAAK,IAAI,EAAE;EAC5E,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;EAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yCAAyC,CAAC,CAAC;EAEjE,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;EAC7D,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;EAE1E,MAAM,aAAa,GAAG,MAAM,eAAe,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;EAExE,kBAAkB,CAAC,YAAY,CAAC,wBAAwB,CAAC,CAAC;EAC1D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;EAE5B,MAAM,CAAC,aAAa,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;AACpD,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;EAC/E,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;EAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yCAAyC,CAAC,CAAC;EAEjE,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;EAC7D,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;EAE1E,MAAM,gBAAgB,GAAG,MAAM,eAAe,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;EAE9E,kBAAkB,CAAC,YAAY,CAAC,2BAA2B,CAAC,CAAC;EAC7D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;EAE5B,MAAM,CAAC,gBAAgB,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;AACvD,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\nit('should emit \"paymentMethodFormReady\" when conditions are met', async () => {\n  const page = await newE2EPage();\n  await page.setContent('<justifi-card-form></justifi-card-form>');\n\n  const cardFormElement = await page.find('justifi-card-form');\n  const paymentFormElement = await page.find('justifi-payment-method-form');\n\n  const readyEventSpy = await cardFormElement.spyOnEvent('cardFormReady');\n\n  paymentFormElement.triggerEvent('paymentMethodFormReady');\n  await page.waitForChanges();\n\n  expect(readyEventSpy).toHaveReceivedEventTimes(1);\n});\n\nit('should emit \"paymentMethodFormTokenize\" when conditions are met', async () => {\n  const page = await newE2EPage();\n  await page.setContent('<justifi-card-form></justifi-card-form>');\n\n  const cardFormElement = await page.find('justifi-card-form');\n  const paymentFormElement = await page.find('justifi-payment-method-form');\n\n  const tokenizeEventSpy = await cardFormElement.spyOnEvent('cardFormTokenize');\n\n  paymentFormElement.triggerEvent('paymentMethodFormTokenize');\n  await page.waitForChanges();\n\n  expect(tokenizeEventSpy).toHaveReceivedEventTimes(1);\n});\n"]}

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

@@ -0,0 +1,83 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+import { PaymentMethodForm } from '../payment-method-form';
+describe('justifi-payment-method-form', () => {
+  it('renders an iframe', async () => {
+    const page = await newSpecPage({
+      components: [PaymentMethodForm],
+      template: () => h("justifi-payment-method-form", { paymentMethodFormType: "card" }),
+    });
+    expect(page.root).toEqualHtml(`
+    <justifi-payment-method-form>
+      <iframe height="55" id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
+    </justifi-payment-method-form>
+  `);
+  });
+  it('renders a card iframe when paymentMethodFormType is card', async () => {
+    const page = await newSpecPage({
+      components: [PaymentMethodForm],
+      template: () => h("justifi-payment-method-form", { paymentMethodFormType: "card" }),
+    });
+    expect(page.root).toEqualHtml(`
+    <justifi-payment-method-form>
+      <iframe height="55" id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
+    </justifi-payment-method-form>
+  `);
+  });
+  it('renders a bank iframe when paymentMethodFormType is bank', async () => {
+    const page = await newSpecPage({
+      components: [PaymentMethodForm],
+      template: () => h("justifi-payment-method-form", { paymentMethodFormType: "bankAccount" }),
+    });
+    expect(page.root).toEqualHtml(`
+    <justifi-payment-method-form>
+      <iframe height="55" id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount"></iframe>
+    </justifi-payment-method-form>
+  `);
+  });
+  it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {
+    const page = await newSpecPage({
+      components: [PaymentMethodForm],
+      template: () => h("justifi-payment-method-form", { paymentMethodFormType: "bankAccount", paymentMethodFormValidationMode: "onChange" }),
+    });
+    expect(page.root).toEqualHtml(`
+      <justifi-payment-method-form>
+        <iframe height="55" id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount?validationMode=onChange"></iframe>
+      </justifi-payment-method-form>
+    `);
+  });
+  it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {
+    const page = await newSpecPage({
+      components: [PaymentMethodForm],
+      template: () => h("justifi-payment-method-form", { paymentMethodFormType: "bankAccount", paymentMethodFormValidationMode: "onBlur" }),
+    });
+    expect(page.root).toEqualHtml(`
+      <justifi-payment-method-form>
+        <iframe height="55" id="justifi-payment-method-form-bankAccount" src="https://js.justifi.ai/v2/bankAccount?validationMode=onBlur"></iframe>
+      </justifi-payment-method-form>
+    `);
+  });
+  it('renders a card iframe with iframeOrigin when paymentMethodFormType is card and iframeOrigin is set', async () => {
+    const page = await newSpecPage({
+      components: [PaymentMethodForm],
+      template: () => h("justifi-payment-method-form", { paymentMethodFormType: "card", iframeOrigin: "https://js.justifi.ai/v2" }),
+    });
+    expect(page.root).toEqualHtml(`
+      <justifi-payment-method-form>
+        <iframe height="55" id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card"></iframe>
+      </justifi-payment-method-form>
+    `);
+  });
+  it('renders a card iframe with singleLine when paymentMethodFormType is card and singleLine is set', async () => {
+    const page = await newSpecPage({
+      components: [PaymentMethodForm],
+      template: () => h("justifi-payment-method-form", { paymentMethodFormType: "card", singleLine: true }),
+    });
+    expect(page.root).toEqualHtml(`
+      <justifi-payment-method-form>
+        <iframe height="55" id="justifi-payment-method-form-card" src="https://js.justifi.ai/v2/card?singleLine=true"></iframe>
+      </justifi-payment-method-form>
+    `);
+  });
+});
+//# sourceMappingURL=payment-method-form.spec.js.map

package/dist/collection/components/payment-method-form/test/payment-method-form.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-method-form.spec.js","sourceRoot":"","sources":["../../../../../src/components/payment-method-form/test/payment-method-form.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { PaymentMethodForm } from '../payment-method-form';\n\ndescribe('justifi-payment-method-form', () => {\n  it('renders an iframe', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\"></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe height=\"55\" id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a card iframe when paymentMethodFormType is card', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\"></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe height=\"55\" id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a bank iframe when paymentMethodFormType is bank', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\"></justifi-payment-method-form>,\n    });\n    expect(page.root).toEqualHtml(`\n    <justifi-payment-method-form>\n      <iframe height=\"55\" id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount\"></iframe>\n    </justifi-payment-method-form>\n  `);\n  });\n\n  it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\" paymentMethodFormValidationMode=\"onChange\"></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe height=\"55\" id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount?validationMode=onChange\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with validationMode when paymentMethodFormType is card and paymentMethodFormValidationMode is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"bankAccount\" paymentMethodFormValidationMode=\"onBlur\"></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe height=\"55\" id=\"justifi-payment-method-form-bankAccount\" src=\"https://js.justifi.ai/v2/bankAccount?validationMode=onBlur\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with iframeOrigin when paymentMethodFormType is card and iframeOrigin is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\" iframeOrigin=\"https://js.justifi.ai/v2\"></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe height=\"55\" id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n\n  it('renders a card iframe with singleLine when paymentMethodFormType is card and singleLine is set', async () => {\n    const page = await newSpecPage({\n      components: [PaymentMethodForm],\n      template: () => <justifi-payment-method-form paymentMethodFormType=\"card\" singleLine={true}></justifi-payment-method-form>,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <justifi-payment-method-form>\n        <iframe height=\"55\" id=\"justifi-payment-method-form-card\" src=\"https://js.justifi.ai/v2/card?singleLine=true\"></iframe>\n      </justifi-payment-method-form>\n    `);\n  });\n});\n"]}

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

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=theme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../../src/components/payment-method-form/theme.ts"],"names":[],"mappings":"","sourcesContent":["export interface Theme {\n  layout?: {\n    padding?: string;\n    formControlSpacingHorizontal?: string;\n    formControlSpacingVertical?: string;\n  };\n  formLabel?: {\n    color?: string;\n    fontFamily?: string;\n    fontSize?: string;\n    fontWeight?: string;\n    margin?: string;\n  };\n  formControl?: {\n    backgroundColor?: string;\n    backgroundColorHover?: string;\n    borderColor?: string;\n    borderColorHover?: string;\n    borderColorFocus?: string;\n    borderColorError?: string;\n    borderWidth?: string;\n    borderBottomWidth?: string;\n    borderLeftWidth?: string;\n    borderRightWidth?: string;\n    borderTopWidth?: string;\n    borderRadius?: string;\n    borderStyle?: string;\n    boxShadow?: string;\n    boxShadowError?: string;\n    boxShadowErrorFocus?: string;\n    boxShadowFocus?: string;\n    color?: string;\n    colorFocus?: string;\n    fontSize?: string;\n    fontWeight?: string;\n    lineHeight?: string;\n    margin?: string;\n    padding?: string;\n  };\n  errorMessage?: {\n    color?: string;\n    margin?: string;\n    fontSize?: string;\n  };\n}\n"]}

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

@@ -90,3 +90,4 @@ export class PaymentsList {
       }];
   }
 }
+//# sourceMappingURL=payments-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"payments-list.js","sourceRoot":"","sources":["../../../../src/components/payments-list/payments-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,GAAG,EAA0B,OAAO,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAO3E,MAAM,OAAO,YAAY;;;gBAEY,EAAE;oBACN,EAAE;;EAIjC,mBAAmB;IACjB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;IACjC,MAAM,QAAQ,GAAG,WAAW,SAAS,WAAW,CAAC;IACjD,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OACjB,GAAG,CAAC,QAAQ,CAAC;OACb,IAAI,CAAC,CAAC,QAA2C,EAAE,EAAE;MACpD,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;MAClE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC,CAAC;EACP,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,aAAO,KAAK,EAAC,eAAe;QAC1B;UACE;YACE,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,yCAAyC,cAE1D;YACL,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,mCAAmC,aAEpD;YACL,UAAI,KAAK,EAAC,KAAK,cAAa;YAC5B,UAAI,KAAK,EAAC,KAAK,kBAAiB;YAChC,UAAI,KAAK,EAAC,KAAK,iBAAgB;YAC/B,UAAI,KAAK,EAAC,KAAK,iBAAgB;YAC/B,UAAI,KAAK,EAAC,KAAK,qBAAoB;YACnC,UAAI,KAAK,EAAC,KAAK,aAAY,CACxB,CACC;QACR,iBACG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;;UAC3B;YACE;cACE,eAAM,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,CAAO;cAC3C,eAAM,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,CAAO,CACxC;YACL,cAAK,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,CAAM;YACzC,cAAK,OAAO,CAAC,UAAU,CAAM;YAC7B,cAAK,OAAO,CAAC,WAAW,CAAM;YAC9B,cAAK,OAAO,CAAC,EAAE,CAAM;YACrB,cAAK,MAAA,MAAA,OAAO,CAAC,cAAc,0CAAE,IAAI,0CAAE,IAAI,CAAM;YAC7C,cAAK,MAAA,MAAA,OAAO,CAAC,cAAc,0CAAE,IAAI,0CAAE,cAAc,CAAM;YACvD,cAAK,OAAO,CAAC,MAAM,CAAM,CACtB,CAAC;QACR,CAAC,CAAC,CACI,CACF,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection, Payment } from '../../api';\nimport { formatCurrency, formatDate, formatTime } from '../../utils/utils';\n\n@Component({\n  tag: 'justifi-payments-list',\n  styleUrl: 'payments-list.css',\n  shadow: true,\n})\nexport class PaymentsList {\n  @Prop() accountId: string;\n  @Prop() auth: { token?: string } = {};\n  @State() payments: Payment[] = [];\n\n  @Watch('accountId')\n  @Watch('auth')\n  requestPropsChanged() {\n    this.fetchData();\n  }\n\n  fetchData(): void {\n    const accountId = this.accountId;\n    const endpoint = `account/${accountId}/payments`;\n    Api(this.auth.token)\n      .get(endpoint)\n      .then((response: IApiResponseCollection<Payment[]>) => {\n        const data = response.data.map(dataItem => new Payment(dataItem));\n        this.payments = data;\n      });\n  }\n\n  render() {\n    return (\n      <Host>\n        <table class=\"justifi-table\">\n          <thead>\n            <tr>\n              <th scope=\"col\" title=\"The date and time each payment was made\">\n                Made on\n              </th>\n              <th scope=\"col\" title=\"The dollar amount of each payment\">\n                Amount\n              </th>\n              <th scope=\"col\">Account</th>\n              <th scope=\"col\">Description</th>\n              <th scope=\"col\">Payment ID</th>\n              <th scope=\"col\">Cardholder</th>\n              <th scope=\"col\">Payment Method</th>\n              <th scope=\"col\">Status</th>\n            </tr>\n          </thead>\n          <tbody>\n            {this.payments.map(payment => {\n              <tr>\n                <td>\n                  <div>{formatDate(payment.created_at)}</div>\n                  <div>{formatTime(payment.created_at)}</div>\n                </td>\n                <td>{formatCurrency(payment.amount)}</td>\n                <td>{payment.account_id}</td>\n                <td>{payment.description}</td>\n                <td>{payment.id}</td>\n                <td>{payment.payment_method?.card?.name}</td>\n                <td>{payment.payment_method?.card?.acct_last_four}</td>\n                <td>{payment.status}</td>\n              </tr>;\n            })}\n          </tbody>\n        </table>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,21 @@
+// import { newSpecPage } from '@stencil/core/testing';
+// import { PaymentsList } from '../payments-list';
+describe('payments-list', () => {
+  it('passes', () => {
+    expect(true);
+  });
+  // it('renders', async () => {
+  //   const page = await newSpecPage({
+  //     components: [PaymentsList],
+  //     html: `<payments-list></payments-list>`,
+  //   });
+  //   expect(page.root).toEqualHtml(`
+  //     <payments-list>
+  //       <mock:shadow-root>
+  //         <slot></slot>
+  //       </mock:shadow-root>
+  //     </payments-list>
+  //   `);
+  // });
+});
+//# sourceMappingURL=payments-list.spec.js.map

package/dist/collection/components/payments-list/test/payments-list.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payments-list.spec.js","sourceRoot":"","sources":["../../../../../src/components/payments-list/test/payments-list.spec.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,mDAAmD;AAEnD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE;IAChB,MAAM,CAAC,IAAI,CAAC,CAAC;EACf,CAAC,CAAC,CAAC;EACH,8BAA8B;EAC9B,qCAAqC;EACrC,kCAAkC;EAClC,+CAA+C;EAC/C,QAAQ;EACR,oCAAoC;EACpC,sBAAsB;EACtB,2BAA2B;EAC3B,wBAAwB;EACxB,4BAA4B;EAC5B,uBAAuB;EACvB,QAAQ;EACR,MAAM;AACR,CAAC,CAAC,CAAC","sourcesContent":["// import { newSpecPage } from '@stencil/core/testing';\n// import { PaymentsList } from '../payments-list';\n\ndescribe('payments-list', () => {\n  it('passes', () => {\n    expect(true);\n  });\n  // it('renders', async () => {\n  //   const page = await newSpecPage({\n  //     components: [PaymentsList],\n  //     html: `<payments-list></payments-list>`,\n  //   });\n  //   expect(page.root).toEqualHtml(`\n  //     <payments-list>\n  //       <mock:shadow-root>\n  //         <slot></slot>\n  //       </mock:shadow-root>\n  //     </payments-list>\n  //   `);\n  // });\n});\n"]}

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

@@ -67,6 +67,343 @@
   --bs-highlight-bg: #fff3cd;
 }
 
+.spinner-grow,
+.spinner-border {
+  display: inline-block;
+  width: var(--bs-spinner-width);
+  height: var(--bs-spinner-height);
+  vertical-align: var(--bs-spinner-vertical-align);
+  border-radius: 50%;
+  animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
+}
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg) /* rtl:ignore */;
+  }
+}
+.spinner-border {
+  --bs-spinner-width: 2rem;
+  --bs-spinner-height: 2rem;
+  --bs-spinner-vertical-align: -0.125em;
+  --bs-spinner-border-width: 0.25em;
+  --bs-spinner-animation-speed: 0.75s;
+  --bs-spinner-animation-name: spinner-border;
+  border: var(--bs-spinner-border-width) solid currentcolor;
+  border-right-color: transparent;
+}
+
+.spinner-border-sm {
+  --bs-spinner-width: 1rem;
+  --bs-spinner-height: 1rem;
+  --bs-spinner-border-width: 0.2em;
+}
+
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.spinner-grow {
+  --bs-spinner-width: 2rem;
+  --bs-spinner-height: 2rem;
+  --bs-spinner-vertical-align: -0.125em;
+  --bs-spinner-animation-speed: 0.75s;
+  --bs-spinner-animation-name: spinner-grow;
+  background-color: currentcolor;
+  opacity: 0;
+}
+
+.spinner-grow-sm {
+  --bs-spinner-width: 1rem;
+  --bs-spinner-height: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner-border,
+  .spinner-grow {
+    --bs-spinner-animation-speed: 1.5s;
+  }
+}
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+
+.text-bg-primary {
+  color: #fff !important;
+  background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-secondary {
+  color: #fff !important;
+  background-color: RGBA(108, 117, 125, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-success {
+  color: #fff !important;
+  background-color: RGBA(25, 135, 84, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-info {
+  color: #000 !important;
+  background-color: RGBA(13, 202, 240, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-warning {
+  color: #000 !important;
+  background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-danger {
+  color: #fff !important;
+  background-color: RGBA(220, 53, 69, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-light {
+  color: #000 !important;
+  background-color: RGBA(248, 249, 250, var(--bs-bg-opacity, 1)) !important;
+}
+
+.text-bg-dark {
+  color: #fff !important;
+  background-color: RGBA(33, 37, 41, var(--bs-bg-opacity, 1)) !important;
+}
+
+.link-primary {
+  color: #0d6efd !important;
+}
+.link-primary:hover, .link-primary:focus {
+  color: #0a58ca !important;
+}
+
+.link-secondary {
+  color: #6c757d !important;
+}
+.link-secondary:hover, .link-secondary:focus {
+  color: #565e64 !important;
+}
+
+.link-success {
+  color: #198754 !important;
+}
+.link-success:hover, .link-success:focus {
+  color: #146c43 !important;
+}
+
+.link-info {
+  color: #0dcaf0 !important;
+}
+.link-info:hover, .link-info:focus {
+  color: #3dd5f3 !important;
+}
+
+.link-warning {
+  color: #ffc107 !important;
+}
+.link-warning:hover, .link-warning:focus {
+  color: #ffcd39 !important;
+}
+
+.link-danger {
+  color: #dc3545 !important;
+}
+.link-danger:hover, .link-danger:focus {
+  color: #b02a37 !important;
+}
+
+.link-light {
+  color: #f8f9fa !important;
+}
+.link-light:hover, .link-light:focus {
+  color: #f9fafb !important;
+}
+
+.link-dark {
+  color: #212529 !important;
+}
+.link-dark:hover, .link-dark:focus {
+  color: #1a1e21 !important;
+}
+
+.ratio {
+  position: relative;
+  width: 100%;
+}
+.ratio::before {
+  display: block;
+  padding-top: var(--bs-aspect-ratio);
+  content: "";
+}
+.ratio > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ratio-1x1 {
+  --bs-aspect-ratio: 100%;
+}
+
+.ratio-4x3 {
+  --bs-aspect-ratio: 75%;
+}
+
+.ratio-16x9 {
+  --bs-aspect-ratio: 56.25%;
+}
+
+.ratio-21x9 {
+  --bs-aspect-ratio: 42.8571428571%;
+}
+
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+
+.sticky-bottom {
+  position: sticky;
+  bottom: 0;
+  z-index: 1020;
+}
+
+@media (min-width: 576px) {
+  .sticky-sm-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-sm-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 768px) {
+  .sticky-md-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-md-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 992px) {
+  .sticky-lg-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-lg-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 1200px) {
+  .sticky-xl-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-xl-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+@media (min-width: 1400px) {
+  .sticky-xxl-top {
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+  .sticky-xxl-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: 1020;
+  }
+}
+.hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+}
+
+.vstack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.stretched-link::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  content: "";
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+  min-height: 1em;
+  background-color: currentcolor;
+  opacity: 0.25;
+}
+
 *,
 *::before,
 *::after {

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

@@ -139,3 +139,4 @@ export class SelectInput {
       }];
   }
 }
+//# sourceMappingURL=select-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-input.js","sourceRoot":"","sources":["../../../../src/components/select-input/select-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAOrF,MAAM,OAAO,WAAW;;;;;;;yBAOG,EAAE;;EAE3B,OAAO,CAAC,KAAK;IACX,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,MAAM,IAAI,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACzC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;EACpE,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,WAAW,EAAC,2BAA2B;MAC3C,aAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,IACnC,IAAI,CAAC,KAAK,CACL;MACR,cACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACrC,IAAI,EAAE,SAAS,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,aAAa,IAE3D,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC1B,cAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,IAAG,MAAM,CAAC,KAAK,CAAU,CACrD,CAAC,CACK;MACR,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAO,CAC1D,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, Host, Prop, h, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'select-input',\n  styleUrl: 'select-input.scss',\n  shadow: true,\n})\nexport class SelectInput {\n  @Prop() name: string;\n  @Prop() label: string;\n  @Prop() defaultValue: string;\n  @Prop() error: string;\n  @Prop() options: { label: string; value: string }[];\n  @Event() fieldReceivedInput: EventEmitter<{ name: string; value: string }>;\n  @State() internalValue = '';\n\n  onInput(event) {\n    const target = event.target;\n    const name = target.getAttribute('name');\n    this.fieldReceivedInput.emit({ name: name, value: target.value });\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <label part=\"label\" class=\"form-label\">\n          {this.label}\n        </label>\n        <select\n          name={this.name}\n          onInput={event => this.onInput(event)}\n          part={`input ${this.error && 'input-invalid'}`}\n          class={this.error ? 'form-select is-invalid' : 'form-select'}\n        >\n          {this.options.map(option => (\n            <option value={option.value}>{option.label}</option>\n          ))}\n        </select>\n        {this.error && <div class=\"invalid-feedback\">{this.error}</div>}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,36 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+import { SelectInput } from '../select-input';
+describe('select-input', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SelectInput],
+      template: () => (h("select-input", { options: [
+          {
+            label: 'Option 1',
+            value: 'option1',
+          },
+          {
+            label: 'Option 2',
+            value: 'option2',
+          },
+        ] })),
+    });
+    expect(page.root).toEqualHtml(`
+      <select-input>
+        <mock:shadow-root>
+          <label></label>
+          <select>
+            <option value="option1">
+              Option 1
+            </option>
+            <option value="option2">
+              Option 2
+            </option>
+          </select>
+        </mock:shadow-root>
+      </select-input>
+    `);
+  });
+});
+//# sourceMappingURL=select-input.spec.js.map

package/dist/collection/components/select-input/test/select-input.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-input.spec.js","sourceRoot":"","sources":["../../../../../src/components/select-input/test/select-input.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;EAC5B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;MACzB,QAAQ,EAAE,GAAG,EAAE,CAAC,CACd,oBACE,OAAO,EAAE;UACP;YACE,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,SAAS;WACjB;UACD;YACE,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,SAAS;WACjB;SACF,GACa,CACjB;KACF,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;KAc7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\n\nimport { newSpecPage } from '@stencil/core/testing';\nimport { SelectInput } from '../select-input';\n\ndescribe('select-input', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SelectInput],\n      template: () => (\n        <select-input\n          options={[\n            {\n              label: 'Option 1',\n              value: 'option1',\n            },\n            {\n              label: 'Option 2',\n              value: 'option2',\n            },\n          ]}\n        ></select-input>\n      ),\n    });\n    expect(page.root).toEqualHtml(`\n      <select-input>\n        <mock:shadow-root>\n          <label></label>\n          <select>\n            <option value=\"option1\">\n              Option 1\n            </option>\n            <option value=\"option2\">\n              Option 2\n            </option>\n          </select>\n        </mock:shadow-root>\n      </select-input>\n    `);\n  });\n});\n"]}