@justifi/webcomponents 4.7.3 → 4.7.5

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

@@ -1,10 +1,10 @@
 import { config } from "../../../config";
 export default {
-  title: 'dev/Components/SubaccountsList',
-  component: 'justifi-subaccounts-list',
-  parameters: {},
-  decorators: [
-    (Story) => `
+    title: 'dev/Components/SubaccountsList',
+    component: 'justifi-subaccounts-list',
+    parameters: {},
+    decorators: [
+        (Story) => `
       ${Story()}
       <script>
         window.addEventListener('subaccount-row-clicked', (e) => {
@@ -12,16 +12,16 @@ export default {
         })
       </script>
     `
-  ]
+    ]
 };
 class SubaccountsListArgs {
-  constructor(args) {
-    this['auth-token'] = args['auth-token'] || config.privateAuthToken;
-    this['account-id'] = args['account-id'] || '';
-  }
+    constructor(args) {
+        this['auth-token'] = args['auth-token'] || config.privateAuthToken;
+        this['account-id'] = args['account-id'] || '';
+    }
 }
 const Template = (args) => {
-  return (`
+    return (`
     <justifi-subaccounts-list
       data-testid="justifi-subaccounts-list"
       auth-token="${args['auth-token']}"
@@ -34,7 +34,7 @@ Basic.args = new SubaccountsListArgs({});
 export const Styled = Template.bind({});
 Styled.args = new SubaccountsListArgs({});
 Styled.decorators = [
-  (Story) => `
+    (Story) => `
     ${Story()}
     <style>
       justifi-subaccounts-list::part(table-head-cell) {

package/dist/collection/components/subaccounts-list/test/subaccounts-list.e2e.js

@@ -1,9 +1,9 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe('subaccounts-list', () => {
-  it('renders', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<justifi-subaccounts-list></justifi-subaccounts-list>');
-    const element = await page.find('justifi-subaccounts-list');
-    expect(element).toHaveClass('hydrated');
-  });
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<justifi-subaccounts-list></justifi-subaccounts-list>');
+        const element = await page.find('justifi-subaccounts-list');
+        expect(element).toHaveClass('hydrated');
+    });
 });

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

@@ -1,33 +1,33 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SubaccountsList } from "../subaccounts-list";
 describe('subaccounts-list', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [SubaccountsList],
-      html: `<justifi-subaccounts-list></justifi-subaccounts-list>`,
-    });
-    expect(page.root).toEqualHtml(`
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SubaccountsList],
+            html: `<justifi-subaccounts-list></justifi-subaccounts-list>`,
+        });
+        expect(page.root).toEqualHtml(`
       <justifi-subaccounts-list>
         <mock:shadow-root>
           <justifi-table error-message="Can not fetch any data without an AccountID and an AuthToken">
         </mock:shadow-root>
       </justifi-subaccounts-list>
     `);
-  });
-  it('stops loading', async () => {
-    const page = await newSpecPage({
-      components: [SubaccountsList],
-      html: `<justifi-subaccounts-list></justifi-subaccounts-list>`,
     });
-    const loading = page.root.__shadowRoot.querySelector('.loading-state');
-    expect(loading).toEqual(null);
-  });
-  it('renders an error when not given proper auth data', async () => {
-    const page = await newSpecPage({
-      components: [SubaccountsList],
-      html: `<justifi-subaccounts-list></justifi-subaccounts-list>`,
+    it('stops loading', async () => {
+        const page = await newSpecPage({
+            components: [SubaccountsList],
+            html: `<justifi-subaccounts-list></justifi-subaccounts-list>`,
+        });
+        const loading = page.root.__shadowRoot.querySelector('.loading-state');
+        expect(loading).toEqual(null);
+    });
+    it('renders an error when not given proper auth data', async () => {
+        const page = await newSpecPage({
+            components: [SubaccountsList],
+            html: `<justifi-subaccounts-list></justifi-subaccounts-list>`,
+        });
+        const error = page.root.__shadowRoot.querySelector('.error-state');
+        expect(error).toBeDefined();
     });
-    const error = page.root.__shadowRoot.querySelector('.error-state');
-    expect(error).toBeDefined();
-  });
 });

package/dist/collection/components/table/exported-parts.js

@@ -0,0 +1,5 @@
+export const tableExportedParts = `
+table-head,table-head-row,table-head-cell,table-body,table-row,table-row-even,
+table-row-odd,table-cell,loading-state-cell,loading-state-spinner,error-state,
+empty-state,pagination-bar,page-arrow,page-button,page-button-disabled,page-button-text
+`;

package/dist/collection/components/table/table.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);
 }
 
@@ -978,16 +982,16 @@ progress {
   --bs-table-bg-type: initial;
   --bs-table-color-state: initial;
   --bs-table-bg-state: initial;
-  --bs-table-color: var(--bs-body-color);
+  --bs-table-color: var(--bs-emphasis-color);
   --bs-table-bg: var(--bs-body-bg);
   --bs-table-border-color: var(--bs-border-color);
   --bs-table-accent-bg: transparent;
-  --bs-table-striped-color: var(--bs-body-color);
-  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
-  --bs-table-active-color: var(--bs-body-color);
-  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
-  --bs-table-hover-color: var(--bs-body-color);
-  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
+  --bs-table-striped-color: var(--bs-emphasis-color);
+  --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
+  --bs-table-active-color: var(--bs-emphasis-color);
+  --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
+  --bs-table-hover-color: var(--bs-emphasis-color);
+  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
   width: 100%;
   margin-bottom: 1rem;
   vertical-align: top;
@@ -1056,7 +1060,7 @@ progress {
 .table-primary {
   --bs-table-color: #000;
   --bs-table-bg: #cfe2ff;
-  --bs-table-border-color: #bacbe6;
+  --bs-table-border-color: #a6b5cc;
   --bs-table-striped-bg: #c5d7f2;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #bacbe6;
@@ -1070,7 +1074,7 @@ progress {
 .table-secondary {
   --bs-table-color: #000;
   --bs-table-bg: #e2e3e5;
-  --bs-table-border-color: #cbccce;
+  --bs-table-border-color: #b5b6b7;
   --bs-table-striped-bg: #d7d8da;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #cbccce;
@@ -1084,7 +1088,7 @@ progress {
 .table-success {
   --bs-table-color: #000;
   --bs-table-bg: #d1e7dd;
-  --bs-table-border-color: #bcd0c7;
+  --bs-table-border-color: #a7b9b1;
   --bs-table-striped-bg: #c7dbd2;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #bcd0c7;
@@ -1098,7 +1102,7 @@ progress {
 .table-info {
   --bs-table-color: #000;
   --bs-table-bg: #cff4fc;
-  --bs-table-border-color: #badce3;
+  --bs-table-border-color: #a6c3ca;
   --bs-table-striped-bg: #c5e8ef;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #badce3;
@@ -1112,7 +1116,7 @@ progress {
 .table-warning {
   --bs-table-color: #000;
   --bs-table-bg: #fff3cd;
-  --bs-table-border-color: #e6dbb9;
+  --bs-table-border-color: #ccc2a4;
   --bs-table-striped-bg: #f2e7c3;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #e6dbb9;
@@ -1126,7 +1130,7 @@ progress {
 .table-danger {
   --bs-table-color: #000;
   --bs-table-bg: #f8d7da;
-  --bs-table-border-color: #dfc2c4;
+  --bs-table-border-color: #c6acae;
   --bs-table-striped-bg: #eccccf;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #dfc2c4;
@@ -1140,7 +1144,7 @@ progress {
 .table-light {
   --bs-table-color: #000;
   --bs-table-bg: #f8f9fa;
-  --bs-table-border-color: #dfe0e1;
+  --bs-table-border-color: #c6c7c8;
   --bs-table-striped-bg: #ecedee;
   --bs-table-striped-color: #000;
   --bs-table-active-bg: #dfe0e1;
@@ -1154,7 +1158,7 @@ progress {
 .table-dark {
   --bs-table-color: #fff;
   --bs-table-bg: #212529;
-  --bs-table-border-color: #373b3e;
+  --bs-table-border-color: #4d5154;
   --bs-table-striped-bg: #2c3034;
   --bs-table-striped-color: #fff;
   --bs-table-active-bg: #373b3e;
@@ -1659,7 +1663,7 @@ progress {
 
 .row-cols-3 > * {
   flex: 0 0 auto;
-  width: 33.3333333333%;
+  width: 33.33333333%;
 }
 
 .row-cols-4 > * {
@@ -1674,7 +1678,7 @@ progress {
 
 .row-cols-6 > * {
   flex: 0 0 auto;
-  width: 16.6666666667%;
+  width: 16.66666667%;
 }
 
 .col-auto {
@@ -1864,7 +1868,7 @@ progress {
   }
   .row-cols-sm-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-sm-4 > * {
     flex: 0 0 auto;
@@ -1876,7 +1880,7 @@ progress {
   }
   .row-cols-sm-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-sm-auto {
     flex: 0 0 auto;
@@ -2033,7 +2037,7 @@ progress {
   }
   .row-cols-md-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-md-4 > * {
     flex: 0 0 auto;
@@ -2045,7 +2049,7 @@ progress {
   }
   .row-cols-md-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-md-auto {
     flex: 0 0 auto;
@@ -2202,7 +2206,7 @@ progress {
   }
   .row-cols-lg-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-lg-4 > * {
     flex: 0 0 auto;
@@ -2214,7 +2218,7 @@ progress {
   }
   .row-cols-lg-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-lg-auto {
     flex: 0 0 auto;
@@ -2371,7 +2375,7 @@ progress {
   }
   .row-cols-xl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xl-4 > * {
     flex: 0 0 auto;
@@ -2383,7 +2387,7 @@ progress {
   }
   .row-cols-xl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xl-auto {
     flex: 0 0 auto;
@@ -2540,7 +2544,7 @@ progress {
   }
   .row-cols-xxl-3 > * {
     flex: 0 0 auto;
-    width: 33.3333333333%;
+    width: 33.33333333%;
   }
   .row-cols-xxl-4 > * {
     flex: 0 0 auto;
@@ -2552,7 +2556,7 @@ progress {
   }
   .row-cols-xxl-6 > * {
     flex: 0 0 auto;
-    width: 16.6666666667%;
+    width: 16.66666667%;
   }
   .col-xxl-auto {
     flex: 0 0 auto;
@@ -2692,7 +2696,7 @@ progress {
   }
 }
 /*!
- * Bootstrap Utilities v5.3.1 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.3.2 (https://getbootstrap.com/)
  * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
@@ -2791,6 +2795,7 @@ progress {
   --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;
@@ -2862,6 +2867,8 @@ progress {
   --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;
@@ -3372,15 +3379,15 @@ progress {
 }
 
 .shadow {
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  box-shadow: var(--bs-box-shadow) !important;
 }
 
 .shadow-sm {
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+  box-shadow: var(--bs-box-shadow-sm) !important;
 }
 
 .shadow-lg {
-  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+  box-shadow: var(--bs-box-shadow-lg) !important;
 }
 
 .shadow-none {