@justifi/webcomponents 4.7.3 → 4.7.5

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

@@ -4,225 +4,225 @@ import { Api } from "../../api";
 import { FormController } from "../form/form";
 import { config } from "../../../config";
 export class RefundForm {
-  constructor() {
-    this.authToken = undefined;
-    this.paymentId = undefined;
-    this.amount = 0;
-    this.submitButtonText = 'Submit';
-    this.withButton = undefined;
-    this.refundInfoText = undefined;
-    this.errors = {};
-    this.isSubmitting = false;
-  }
-  componentWillLoad() {
-    this.formController = new FormController(RefundFormSchema);
-    this.formController.setInitialValues({
-      amount: this.amount,
-      message: '',
-    });
-    this.initializeApi();
-  }
-  componentDidLoad() {
-    this.formController.errors.subscribe(errors => {
-      this.errors = Object.assign({}, errors);
-    });
-  }
-  /**
-   * Handles the form submission.
-   * Prevents the default form action, validates the form, and emits the 'submitted' event.
-   */
-  async handleSubmit(event) {
-    event.preventDefault();
-    this.formController.validateAndSubmit(this.submitRefund.bind(this), {
-      amount: this.amount,
-    });
-  }
-  /**
-   * Submits the refund request to the API.
-   */
-  async submitRefund() {
-    this.isSubmitting = true;
-    const refundFields = this.formController.values.getValue();
-    try {
-      await this.api.post(`payments/${this.paymentId}/refunds`, refundFields);
-      this.submitted.emit(refundFields);
+    constructor() {
+        this.authToken = undefined;
+        this.paymentId = undefined;
+        this.amount = 0;
+        this.submitButtonText = 'Submit';
+        this.withButton = undefined;
+        this.refundInfoText = undefined;
+        this.errors = {};
+        this.isSubmitting = false;
     }
-    catch (error) {
-      console.error('Error submitting refund:', error);
-      this.submitted.emit(error);
+    componentWillLoad() {
+        this.formController = new FormController(RefundFormSchema);
+        this.formController.setInitialValues({
+            amount: this.amount,
+            message: '',
+        });
+        this.initializeApi();
     }
-    finally {
-      this.isSubmitting = false;
+    componentDidLoad() {
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
     }
-  }
-  /**
-   * Handles input changes, updating the refundFields state.
-   */
-  handleInput(field, value) {
-    this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [field]: value }));
-  }
-  /**
-   * Initializes the API with the given authentication token.
-   * Logs a warning if the auth token is missing.
-   */
-  initializeApi() {
-    if (!this.authToken) {
-      console.warn('Warning: Missing auth-token.');
+    /**
+     * Handles the form submission.
+     * Prevents the default form action, validates the form, and emits the 'submitted' event.
+     */
+    async handleSubmit(event) {
+        event.preventDefault();
+        this.formController.validateAndSubmit(this.submitRefund.bind(this), {
+            amount: this.amount,
+        });
     }
-    this.api = Api(this.authToken, config.proxyApiOrigin);
-  }
-  render() {
-    var _a;
-    return (h(Host, null, h("h1", null, "Refund"), this.refundInfoText && (h("div", { class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { class: "m-0", innerHTML: this.refundInfoText }))), h("form", { onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { class: "form-group" }, h("form-control-monetary", { name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', inputHandler: (name, value) => this.handleInput(name, value), error: this.errors.amount })), h("div", { class: "form-group" }, h("form-control-text", { name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), error: this.errors.notes })), this.withButton && (h("div", { class: "form-group d-flex flex-row-reverse" }, h("button", { type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
-  }
-  static get is() { return "justifi-refund-form"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["refund-form.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["refund-form.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "authToken": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Authentication token required to authorize the refund transaction."
-        },
-        "attribute": "auth-token",
-        "reflect": false
-      },
-      "paymentId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The unique identifier for the payment to be refunded."
-        },
-        "attribute": "payment-id",
-        "reflect": false
-      },
-      "amount": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The amount of the payment to be refunded."
-        },
-        "attribute": "amount",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "submitButtonText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Custom text for the submit button. Defaults to 'Submit'."
-        },
-        "attribute": "submit-button-text",
-        "reflect": false,
-        "defaultValue": "'Submit'"
-      },
-      "withButton": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Flag to control the visibility of the submit button."
-        },
-        "attribute": "with-button",
-        "reflect": false
-      },
-      "refundInfoText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Optional information text displayed above the form."
-        },
-        "attribute": "refund-info-text",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "errors": {},
-      "isSubmitting": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "submitted",
-        "name": "submitted",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted when the refund form is successfully submitted.\nThe submitted refund fields are passed as the event detail."
-        },
-        "complexType": {
-          "original": "RefundFormFields",
-          "resolved": "RefundFormFields",
-          "references": {
-            "RefundFormFields": {
-              "location": "import",
-              "path": "./refund-form-schema",
-              "id": "src/components/refund-form/refund-form-schema.ts::RefundFormFields"
-            }
-          }
+    /**
+     * Submits the refund request to the API.
+     */
+    async submitRefund() {
+        this.isSubmitting = true;
+        const refundFields = this.formController.values.getValue();
+        try {
+            await this.api.post(`payments/${this.paymentId}/refunds`, refundFields);
+            this.submitted.emit(refundFields);
+        }
+        catch (error) {
+            console.error('Error submitting refund:', error);
+            this.submitted.emit(error);
         }
-      }];
-  }
+        finally {
+            this.isSubmitting = false;
+        }
+    }
+    /**
+     * Handles input changes, updating the refundFields state.
+     */
+    handleInput(field, value) {
+        this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [field]: value }));
+    }
+    /**
+     * Initializes the API with the given authentication token.
+     * Logs a warning if the auth token is missing.
+     */
+    initializeApi() {
+        if (!this.authToken) {
+            console.warn('Warning: Missing auth-token.');
+        }
+        this.api = Api(this.authToken, config.proxyApiOrigin);
+    }
+    render() {
+        var _a;
+        return (h(Host, null, h("h1", null, "Refund"), this.refundInfoText && (h("div", { class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { class: "m-0", innerHTML: this.refundInfoText }))), h("form", { onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { class: "form-group" }, h("form-control-monetary", { name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', inputHandler: (name, value) => this.handleInput(name, value), error: this.errors.amount })), h("div", { class: "form-group" }, h("form-control-text", { name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), error: this.errors.notes })), this.withButton && (h("div", { class: "form-group d-flex flex-row-reverse" }, h("button", { type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+    }
+    static get is() { return "justifi-refund-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["refund-form.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["refund-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "authToken": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Authentication token required to authorize the refund transaction."
+                },
+                "attribute": "auth-token",
+                "reflect": false
+            },
+            "paymentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The unique identifier for the payment to be refunded."
+                },
+                "attribute": "payment-id",
+                "reflect": false
+            },
+            "amount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The amount of the payment to be refunded."
+                },
+                "attribute": "amount",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "submitButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text for the submit button. Defaults to 'Submit'."
+                },
+                "attribute": "submit-button-text",
+                "reflect": false,
+                "defaultValue": "'Submit'"
+            },
+            "withButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag to control the visibility of the submit button."
+                },
+                "attribute": "with-button",
+                "reflect": false
+            },
+            "refundInfoText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional information text displayed above the form."
+                },
+                "attribute": "refund-info-text",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "errors": {},
+            "isSubmitting": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "submitted",
+                "name": "submitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the refund form is successfully submitted.\nThe submitted refund fields are passed as the event detail."
+                },
+                "complexType": {
+                    "original": "RefundFormFields",
+                    "resolved": "RefundFormFields",
+                    "references": {
+                        "RefundFormFields": {
+                            "location": "import",
+                            "path": "./refund-form-schema",
+                            "id": "src/components/refund-form/refund-form-schema.ts::RefundFormFields"
+                        }
+                    }
+                }
+            }];
+    }
 }

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

@@ -1,17 +1,17 @@
 export default {
-  title: 'dev/Components/RefundForm',
-  component: 'refund-form',
-  argTypes: {
-    authToken: { control: 'text' },
-    paymentId: { control: 'text' },
-    amount: { control: 'number' },
-    submitButtonText: { control: 'text' },
-    withButton: { control: 'boolean' },
-    refundInfoText: { control: 'text' },
-  },
+    title: 'dev/Components/RefundForm',
+    component: 'refund-form',
+    argTypes: {
+        authToken: { control: 'text' },
+        paymentId: { control: 'text' },
+        amount: { control: 'number' },
+        submitButtonText: { control: 'text' },
+        withButton: { control: 'boolean' },
+        refundInfoText: { control: 'text' },
+    },
 };
 const RefundFormTemplate = ({ authToken, paymentId, amount, submitButtonText, withButton, refundInfoText, cssVariables, }) => {
-  return `
+    return `
     <div>
       <justifi-refund-form
         auth-token="${authToken}"
@@ -22,8 +22,8 @@ const RefundFormTemplate = ({ authToken, paymentId, amount, submitButtonText, wi
         refund-info-text="${refundInfoText}"
       ></justifi-refund-form>
       ${!withButton
-    ? `<button id="custom-submit" type="button" class="btn btn-primary">Custom Submit</button>`
-    : ''}
+        ? `<button id="custom-submit" type="button" class="btn btn-primary">Custom Submit</button>`
+        : ''}
     </div>
     <style>
       :root {
@@ -95,23 +95,23 @@ const RefundFormTemplate = ({ authToken, paymentId, amount, submitButtonText, wi
 };
 export const Basic = RefundFormTemplate.bind({});
 Basic.args = {
-  authToken: '',
-  paymentId: '',
-  amount: 0,
-  submitButtonText: 'Submit',
-  withButton: true,
-  refundInfoText: '',
-  cssVariables: '',
+    authToken: '',
+    paymentId: '',
+    amount: 0,
+    submitButtonText: 'Submit',
+    withButton: true,
+    refundInfoText: '',
+    cssVariables: '',
 };
 export const Styled = RefundFormTemplate.bind({});
 Styled.args = {
-  authToken: '',
-  paymentId: '',
-  amount: 0,
-  submitButtonText: 'Submit',
-  withButton: true,
-  refundInfoText: '',
-  cssVariables: `
+    authToken: '',
+    paymentId: '',
+    amount: 0,
+    submitButtonText: 'Submit',
+    withButton: true,
+    refundInfoText: '',
+    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;

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

@@ -93,6 +93,7 @@
   --bs-link-hover-color: #0a58ca;
   --bs-link-hover-color-rgb: 10, 88, 202;
   --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
   --bs-highlight-bg: #fff3cd;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -164,6 +165,8 @@
   --bs-link-color-rgb: 110, 168, 254;
   --bs-link-hover-color-rgb: 139, 185, 254;
   --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
   --bs-form-valid-color: #75b798;
@@ -712,6 +715,7 @@ small {
 
 mark {
   padding: 0.1875em;
+  color: var(--bs-highlight-color);
   background-color: var(--bs-highlight-bg);
 }
 
@@ -1237,6 +1241,7 @@ textarea.form-control-lg {
 
 .form-check-input {
   --bs-form-check-bg: var(--bs-body-bg);
+  flex-shrink: 0;
   width: 1em;
   height: 1em;
   margin-top: 0.25em;
@@ -1384,7 +1389,7 @@ textarea.form-control-lg {
   height: 0.5rem;
   color: transparent;
   cursor: pointer;
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bs-secondary-bg);
   border-color: transparent;
   border-radius: 1rem;
 }
@@ -1410,7 +1415,7 @@ textarea.form-control-lg {
   height: 0.5rem;
   color: transparent;
   cursor: pointer;
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bs-secondary-bg);
   border-color: transparent;
   border-radius: 1rem;
 }