@sheerid/jslib-nightly 2.214.0-alpha.4 → 2.215.0-alpha.0

package/FormFieldTypeahead.css

@@ -4,9 +4,9 @@
  *   This file is not intended for use in other contexts and there are no guarantees about its behavior outside of MySheerID.
  */ 
 /**
- *   VERSION: 2.214.0-alpha.4
- *   BUILD_TIMESTAMP: 1776188838408
- *   BUILD_DATE: Tue Apr 14 2026 17:47:18 GMT+0000 (Coordinated Universal Time)
- *   BUILD_COMMIT: 82b6e2e100a237171c1a3947d3b41dbac226afd7
+ *   VERSION: 2.215.0-alpha.0
+ *   BUILD_TIMESTAMP: 1776202890174
+ *   BUILD_DATE: Tue Apr 14 2026 21:41:30 GMT+0000 (Coordinated Universal Time)
+ *   BUILD_COMMIT: ceb803335dbda9716b81bda554fd4f45c81e4441
  */
 .sid-selected-org__wrapper:focus-within .sid-selected-org__container{outline:2px solid var(--sheerid-color-focus, Highlight);outline-offset:2px}.sid-selected-org__container{background:var(--sheerid-color-fg-10);display:flex;gap:var(--sheerid-font-size-medium);padding:var(--sheerid-font-size-medium);place-items:center}.sid-selected-org__clear{background:transparent;border:0;border-radius:3px;color:var(--sheerid-color-fg);cursor:pointer;display:inline-block;font-size:24px;font-weight:lighter;padding:1px 5px}.sid-selected-org__clear:hover{background:var(--sheerid-color-fg-20)}.sid-selected-org__name{flex-grow:1;font-size:var(--sheerid-font-size-body);font-weight:400}.sid-selected-org__location{color:var(--sheerid-color-fg-70);display:block}.sid-input-clear-button{background-color:transparent;border:none;height:100%;margin:0;padding:0;position:absolute;top:0;width:35px}.sid-ltr .sid-input-clear-button{right:0}.sid-rtl .sid-input-clear-button{left:0}.sid-input-clear-button--disabled{cursor:not-allowed}.sid-text-input{padding-right:30px;text-overflow:ellipsis}

package/README.md

@@ -0,0 +1,187 @@
+# SheerID JavaScript Library
+
+See [https://developer.sheerid.com](https://developer.sheerid.com) for more
+
+## Step 1: Overview
+
+An overview of SheerID Installation Methods can be found [**here**](https://developer.sheerid.com/js-library)
+
+This readme demonstrates options when SheerID is installed via the CDN.
+
+## Step 2: Install via the CDN
+
+Click [**here**](https://developer.sheerid.com/js-library#installation) for instructions. Once you have an html page with a form rendered in a div, you are ready to reference the various options outlined in this README
+
+## Set Options
+
+After step 2 you should have something like this:
+
+    <div id="my-form"></div>
+    <script type="module">
+        import sheerId from "https://cdn.jsdelivr.net/npm/@sheerid/jslib@2/sheerid-install.js"
+
+        // Create a program at my.sheerid.com
+        var myProgramId = '<YOUR_PROGRAM_ID>';
+        var myDiv = document.getElementById('my-form');
+        var myForm = new sheerId.loadInlineIframe(myDiv, myProgramId);
+        myForm.setOptions({ logLevel: "info" })
+    </script>
+
+Many of the custom behaviors SheerID offers are exposed via `setOptions`. `sheerId.setOptions({logLevel: 'info'});` is setting the log level of the library to info, for increased debugging output while testing your program.
+
+### Available Options
+
+Pass all or a part of the following object to `sheerId.setOptions()`:
+
+    customFormFields: [],
+    doFetchTheme: true,
+    httpRequestTimeout: 10000, // ms
+    locale: null,
+    logLevel: "error",
+    messagesWithLocale: {},
+    minimumOrganizationSearchLength: 1,
+    mockStep: undefined,
+    mockSubSegment: undefined,
+    mockErrorId: undefined,
+    mockErrorDetailId: undefined,
+    mockCaptchaError: undefined,
+    mockRewardCode: undefined,
+    mockRedirectUrl: undefined,
+    mockResponse: undefined,
+    privacyPolicyUrl: undefined,
+    useFingerprinting: false,
+    verificationId: undefined,
+
+For a full list of options, see https://developer.sheerid.com/jslib-api-docs/index.html#options
+
+## Custom Form Fields
+
+Custom form fields have the following interface:
+
+    export interface FormFieldConfig {
+        fieldId: string; // should be camelCase. Will be used the key in metadata where the value is stored. Also used to build localization message keys
+        fieldType: string; // Only text for now. Later: | "select" | "radio", etc
+        validate: (value: string | boolean) => ErrorId | string | undefined; // If value is invalid, return an error id or string so the error msg can be localized and shown
+        showPlaceholderAndHideLabel?: boolean;
+        required?: boolean;
+    }
+
+At the time of writing, only `fieldType=text` is supported. Provide an array of custom form fields to `setOptions` and they will be added below other form fields.
+
+The data that is collected for custom fields is attached to the verification as metadata with the metadata key = `fieldId`. This data will show up in Verification Reports.
+
+    myForm.setOptions({
+        customFormFields: [
+            {
+                fieldId: "favoriteHairColor",
+                fieldType: "text",
+                showPlaceholderAndHideLabel: false,
+                required: true,
+                validate: (value) => {
+                    if (!value) {
+                        return "hairColorRequired"; // this becomes `errorId.hairColorRequired` in your localized messages object
+                    }
+                }
+            },
+        ],
+    });
+
+You will want to provide localized messaging for your field, which can be done with setOptions as well:
+
+    myForm.setOptions({
+        messagesWithLocale: {
+            "en-US": {
+                favoriteHairColorPlaceholder: 'My hair is...',
+                favoriteHairColorLabel: 'Hair Color',
+                'errorId.hairColorRequired': 'Hair Color is Required',
+            },
+            es: {
+                testPlaceholder: 'Mi pelo es...',
+                testLabel: 'Color de pelo',
+                'errorId.myCustomErrorId': 'Se requiere color de cabello',
+            },
+        },
+    });
+
+**Note:** placeholder and label message keys are automatically formulated based on the fieldId: `${fieldId}Placeholder` and `${fieldId}Label`
+
+See it in action: https://jsfiddle.net/AaronSheerID/n91p2sya/
+
+Custom form fields of type `checkbox` are available as well. They do not use placeholder or required values. You can construct a validation callback to enforce that they are true or false, and display any error message accordingly.
+
+## Hooks
+
+Hooks are a convenient way to run your own javascript function(s) when the core jslib does certain things. They are helpful because you don't need to know a lot about the system to do certain things at certain times.
+
+To add a hook, call addHook with the HookName and a callback. The callback will be passed relevant parameter(s) that you may or may not choose to utilize.
+
+the form objects returned from modals or from inline iframes have `on` and
+`once` methods to run your own code when events happen inside the verification
+process.
+
+```javascript
+myForm.on("ON_VERIFICATION_SUCCESS", (verificationResponse) => {
+  window.location = "new.html";
+});
+
+myForm.once("ON_VERIFICATION_SUCCESS", (verificationResponse) => {
+  window.location = "new.html";
+});
+```
+
+`on` and `once` return an unsubscribe function you can use to remove listeners.
+
+```javascript
+var unsubscribe = myForm.on("ON_FORM_LOCALE_CHANGE", (locale) => {
+  window.alert(`new locale: ${locale}`);
+});
+
+unsubscribe();
+// The above callback will no longer run on locale changes.
+```
+
+There are 4 hooks you can use:
+
+`ON_VERIFICATION_READY`
+
+When the page loads, several api requests take place. Once they've all returned, and the library has initialized, ON_VERIFICATION_READY is called. After calling this hook once, your callbacks are removed/reset to ensure this happens only once per page-load (UX-346)
+
+Your callback is given the `VerificationResponse` object
+
+`ON_VERIFICATION_SUCCESS`
+
+Called right after the API responds with the success step, but before the viewModel is updated in response to that API response.
+
+Your callback is given the `VerificationResponse` object
+
+`ON_VERIFICATION_STEP_CHANGE`
+
+Called any time the current viewModel's step is different from the API response (just received)'s step. In other words, when the library determines we're about to display a different step.
+Your callback is given the `VerificationResponse` object
+
+`ON_FORM_LOCALE_CHANGE`
+
+Called any time the current viewModel's locale is updated. Typically, this action occurs whenever a user changes their locale using the locale picker.
+
+Your callback is provided the `Locale` string
+
+See it in action [here](https://jsfiddle.net/AaronSheerID/adnj61ke/)
+
+## Extra Messages
+
+In addition to overriding any message, you can add extra text to a specific region on the form. Normally no text is shown in these spots. To add text, just define it using `setOptions()` along with the appropriate message key:
+
+```
+sheerId.setOptions({
+    messagesWithLocale: {
+        "en-US": {
+          extraMessageCollectAboveSubmit: 'Lorem ipsum...',
+        },
+        es: {
+          extraMessageCollectAboveSubmit: 'Lorem ipsum... (es)',
+        },
+    },
+});
+```
+
+At this time only `extraMessageCollectAboveSubmit` is available. This message with show right above the Submit button on the collect step for any Segment.

package/_mysheerid-preview.css

@@ -4,9 +4,9 @@
  *   This file is not intended for use in other contexts and there are no guarantees about its behavior outside of MySheerID.
  */ 
 /**
- *   VERSION: 2.214.0-alpha.4
- *   BUILD_TIMESTAMP: 1776188838408
- *   BUILD_DATE: Tue Apr 14 2026 17:47:18 GMT+0000 (Coordinated Universal Time)
- *   BUILD_COMMIT: 82b6e2e100a237171c1a3947d3b41dbac226afd7
+ *   VERSION: 2.215.0-alpha.0
+ *   BUILD_TIMESTAMP: 1776202890174
+ *   BUILD_DATE: Tue Apr 14 2026 21:41:30 GMT+0000 (Coordinated Universal Time)
+ *   BUILD_COMMIT: ceb803335dbda9716b81bda554fd4f45c81e4441
  */
 .sid-inline-iframe{border:0;height:100%;min-width:32rem}.sid-modal__wrapper{background:#fff;border-radius:5px;box-shadow:#989898 10px 10px 15px;left:50%;max-height:calc(100% - 80px);opacity:0;outline:none;overflow-y:auto;position:fixed;top:50%;transform:translate(-50%,-50%);transition:opacity .3s linear;width:32rem;z-index:9998}.sid-modal__wrapper.fade-in{opacity:1}.sid-modal__iframe{border:0;display:block;height:100%;min-width:250px;width:100%}.sid-modal__close-button{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;flex-direction:row;position:absolute;right:10px;text-decoration:none;top:10px;z-index:9999}.sid-modal__close-icon{background-image:url(https://services.sheerid.com/jsapi/img/btn1.png);background-repeat:no-repeat;filter:brightness(25%);height:20px;width:20px}.sid-modal__close-text{color:#000;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:var(--sheerid-font-size-body);margin-right:5px}.sid-modal__overlay{background-color:#b3b3b3;height:100%;left:0;opacity:0;position:fixed;top:0;transition:opacity .3s linear;width:100%;z-index:9997}.sid-modal__overlay.fade-in{opacity:.75}@media(max-width:620px){.sid-modal__wrapper{max-width:calc(100vw - 1rem)}}@media(max-width:32rem){.sid-inline-iframe{min-width:calc(100vw - 1rem);width:100%}}