npm - @justifi/webcomponents - Versions diffs - 4.7.0-rc.2 → 4.7.1-rc.0 - Mend

@justifi/webcomponents 4.7.0-rc.2 → 4.7.1-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (157) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"business-form.stories.js","sourceRoot":"","sources":["../../../../src/components/business-form/business-form.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,qBAAqB;EAMzB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAChD,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,~~wBAAwB~~,CAAC;~~IAC3E~~,IAAI,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;EACpD,CAAC;CACF;AAED,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,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;;;sBAGa,IAAI,CAAC,YAAY,CAAC;sBAClB,IAAI,CAAC,YAAY,CAAC;uBACjB,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,IAAI,qBAAqB,CAAC,EAAE,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,~~KAAK~~,CAAC,IAAI,GAAG,IAAI,qBAAqB,CAAC;~~EACrC~~,YAAY,EAAE,EAAE;EAChB,aAAa,EAAE,EAAE;EACjB,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEb;CACF,CAAC,CAAC","sourcesContent":["import { config } from '../../../config';\n\nclass BusinessFormStoryArgs {\n 'auth-token': string;\n 'account-id': string;\n 'bussiness-id': string;\n 'cssVariables': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| '';\n this['business-id'] = args['business-id'] \|\| '';\n this['account-id'] = args['account-id'] \|\| config.~~exampleBusinessAccountId~~;\n this['cssVariables'] = args['cssVariables'] \|\| '';\n }\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 'account-id': {\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['auth-token']}\"\n account-id=\"${args['account-id']}\"\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 = new BusinessFormStoryArgs({});\n\nexport const Styled = Template.bind({});\~~nBasic~~.args = new BusinessFormStoryArgs({\n 'auth-token': '',\n 'business-id': '',\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"]}
1	+ {"version":3,"file":"business-form.stories.js","sourceRoot":"","sources":["../../../../src/components/business-form/business-form.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,qBAAqB;EAMzB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAChD,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;IACnE,IAAI,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;EACpD,CAAC;CACF;AAED,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,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;;;sBAGa,IAAI,CAAC,YAAY,CAAC;sBAClB,IAAI,CAAC,YAAY,CAAC;uBACjB,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,IAAI,qBAAqB,CAAC,EAAE,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,qBAAqB,CAAC;EACtC,YAAY,EAAE,EAAE;EAChB,aAAa,EAAE,EAAE;EACjB,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEb;CACF,CAAC,CAAC","sourcesContent":["import { config } from '../../../config';\n\nclass BusinessFormStoryArgs {\n 'auth-token': string;\n 'account-id': string;\n 'bussiness-id': string;\n 'cssVariables': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| '';\n this['business-id'] = args['business-id'] \|\| '';\n this['account-id'] = args['account-id'] \|\| config.exampleAccountId;\n this['cssVariables'] = args['cssVariables'] \|\| '';\n }\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 'account-id': {\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['auth-token']}\"\n account-id=\"${args['account-id']}\"\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 = new BusinessFormStoryArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new BusinessFormStoryArgs({\n 'auth-token': '',\n 'business-id': '',\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/business-list/business-list.stories.js CHANGED Viewed

@@ -7,7 +7,7 @@ export default {
 class BusinessListArgs {
   constructor(args) {
     this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
-    this['account-id'] = args['account-id'] || config.exampleBusinessAccountId;
+    this['account-id'] = args['account-id'] || config.exampleAccountId;
   }
 }
 const Template = (args) => {

package/dist/collection/components/business-list/business-list.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"business-list.stories.js","sourceRoot":"","sources":["../../../../src/components/business-list/business-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,6BAA6B;EACpC,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,gBAAgB;EAIpB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,cAAc,CAAC;IACjE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,~~wBAAwB~~,CAAC;~~EAC7E~~,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAsB,EAAE,EAAE;EAC1C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,UAAU,GAAG;EACrB,CAAC,KAAK,EAAE,EAAE,CAAC;;QAEL,KAAK,EAAE;;GAEZ;CACF,CAAA;AACD,SAAS,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n title: 'dev/Components/BusinessList',\n component: 'justifi-business-list',\n parameters: {}\n};\n\nclass BusinessListArgs {\n 'auth-token': string;\n 'account-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| config.proxyAuthToken;\n this['account-id'] = args['account-id'] \|\| config.~~exampleBusinessAccountId~~;\n }\n}\n\nconst Template = (args: BusinessListArgs) => {\n return (`\n <justifi-business-list\n data-testid=\"justifi-business-list\"\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n />\n `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new BusinessListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new BusinessListArgs({});\nStyled.decorators = [\n (Story) => `\n ${Story()}\n <style>\n justifi-business-list::part(table-head-cell) {\n background-color: #F4F4F6;\n }\n justifi-business-list::part(pagination-bar) {\n background-color: #F4F4F6;\n }\n justifi-business-list::part(arrow) {\n --bs-btn-disabled-bg: #212529;\n --bs-btn-disabled-border-color: #212529;\n --bs-btn-bg: #212529;\n --bs-btn-border-color: #212529;\n --bs-btn-hover-bg: #fccc32;\n --bs-btn-hover-border-color: #fccc32;\n }\n justifi-business-list::part(error-state) {\n color: red;\n background-color: #EEEEF5;\n }\n justifi-business-list::part(loading-state-cell) {\n background-color: #EEEEF5;\n }\n justifi-business-list::part(table-row) {\n background-color: #EEEEF5;\n }\n justifi-business-list::part(table-row-even) {\n background-color: #F4F4F6;\n }\n </style>\n `\n]\n\nexport const Contained = Template.bind({});\nContained.decorators = [\n (Story) => `\n <div style=\"position: relative; width: 900px; height: 300px; overflow-x: hidden;\">\n ${Story()}\n </div>\n `\n]\nContained.args = new BusinessListArgs({});\n"]}
1	+ {"version":3,"file":"business-list.stories.js","sourceRoot":"","sources":["../../../../src/components/business-list/business-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,6BAA6B;EACpC,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,gBAAgB;EAIpB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,cAAc,CAAC;IACjE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;EACrE,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAsB,EAAE,EAAE;EAC1C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,UAAU,GAAG;EACrB,CAAC,KAAK,EAAE,EAAE,CAAC;;QAEL,KAAK,EAAE;;GAEZ;CACF,CAAA;AACD,SAAS,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n title: 'dev/Components/BusinessList',\n component: 'justifi-business-list',\n parameters: {}\n};\n\nclass BusinessListArgs {\n 'auth-token': string;\n 'account-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| config.proxyAuthToken;\n this['account-id'] = args['account-id'] \|\| config.exampleAccountId;\n }\n}\n\nconst Template = (args: BusinessListArgs) => {\n return (`\n <justifi-business-list\n data-testid=\"justifi-business-list\"\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n />\n `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new BusinessListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new BusinessListArgs({});\nStyled.decorators = [\n (Story) => `\n ${Story()}\n <style>\n justifi-business-list::part(table-head-cell) {\n background-color: #F4F4F6;\n }\n justifi-business-list::part(pagination-bar) {\n background-color: #F4F4F6;\n }\n justifi-business-list::part(arrow) {\n --bs-btn-disabled-bg: #212529;\n --bs-btn-disabled-border-color: #212529;\n --bs-btn-bg: #212529;\n --bs-btn-border-color: #212529;\n --bs-btn-hover-bg: #fccc32;\n --bs-btn-hover-border-color: #fccc32;\n }\n justifi-business-list::part(error-state) {\n color: red;\n background-color: #EEEEF5;\n }\n justifi-business-list::part(loading-state-cell) {\n background-color: #EEEEF5;\n }\n justifi-business-list::part(table-row) {\n background-color: #EEEEF5;\n }\n justifi-business-list::part(table-row-even) {\n background-color: #F4F4F6;\n }\n </style>\n `\n]\n\nexport const Contained = Template.bind({});\nContained.decorators = [\n (Story) => `\n <div style=\"position: relative; width: 900px; height: 300px; overflow-x: hidden;\">\n ${Story()}\n </div>\n `\n]\nContained.args = new BusinessListArgs({});\n"]}

package/dist/collection/components/card-form/card-form.stories.js CHANGED Viewed

@@ -10,14 +10,6 @@ export default {
       },
     },
   },
-  decorators: [
-    story => `
-      <!-- Deprecated Notice -->
-      <p style="color: red; font-family: 'Roboto Mono', monospace;">Note: The 'resize' method is deprecated and will be removed in future releases.</p>
-      ${story()}
-      <script>${addEvents()}</script>
-    `,
-  ],
 };
 const handleValidateClick = async (cardForm) => {
   const valid = await cardForm.validate();

package/dist/collection/components/card-form/card-form.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card-form.stories.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AASzC,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,SAAS,EAAE,mBAAmB;EAC9B,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,WAAW,EAAE,6DAA6D;MAC1E,KAAK,EAAE;QACL,QAAQ,EAAE,SAAS;OACpB;KACF;GACF;~~EACD,UAAU,EAAE;IACV,KAAK,CAAC,EAAE,CAAC;;;QAGL,KAAK,EAAE;gBACC,SAAS,EAAE;KACtB;GACF;~~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","sourcesContent":["import { config } from '../../../config';\n\ninterface CardFormStoryArgs {\n 'iframe-origin': string;\n 'single-line': boolean;\n 'validation-mode': string;\n 'css-variables': string;\n}\n\nexport default {\n title: 'Components/CardForm',\n component: 'justifi-card-form',\n argTypes: {\n 'resize': {\n description: 'Deprecated: This method will be removed in future releases.',\n table: {\n category: 'methods',\n },\n },\n },\n decorators: [\n story => `\n <!-- Deprecated Notice -->\n <p style=\"color: red; font-family: 'Roboto Mono', monospace;\">Note: The 'resize' method is deprecated and will be removed in future releases.</p>\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='${config.iframeOrigin}'\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"]}
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":["import { config } from '../../../config';\n\ninterface CardFormStoryArgs {\n 'iframe-origin': string;\n 'single-line': boolean;\n 'validation-mode': string;\n 'css-variables': string;\n}\n\nexport default {\n title: 'Components/CardForm',\n component: 'justifi-card-form',\n argTypes: {\n 'resize': {\n description: 'Deprecated: This method will be removed in future releases.',\n table: {\n category: 'methods',\n },\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='${config.iframeOrigin}'\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/gross-payment-chart/gross-payment-chart.stories.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { config } from "../../../config";
 export default {
   title: 'dev/Components/GrossPaymentChart',
   component: 'justifi-gross-payment-chart',
@@ -5,8 +6,8 @@ export default {
 };
 class GrossChartArgs {
   constructor(args) {
-    this['auth-token'] = args['auth-token'] || '';
-    this['account-id'] = args['account-id'] || '';
+    this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
+    this['account-id'] = args['account-id'] || config.exampleAccountId;
   }
 }
 const Template = (args) => {

package/dist/collection/components/gross-payment-chart/gross-payment-chart.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gross-payment-chart.stories.js","sourceRoot":"","sources":["../../../../src/components/gross-payment-chart/gross-payment-chart.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,kCAAkC;EACzC,SAAS,EAAE,6BAA6B;EACxC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,cAAc;EAIlB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,~~EAAE~~,CAAC;~~IAC9C~~,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,~~EAAE~~,CAAC;~~EAChD~~,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAoB,EAAE,EAAE;EACxC,OAAO,CAAC;;oBAEU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC","sourcesContent":["~~export~~ default {\n title: 'dev/Components/GrossPaymentChart',\n component: 'justifi-gross-payment-chart',\n parameters: {}\n};\n\nclass GrossChartArgs {\n 'auth-token': string;\n 'account-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| '';\n this['account-id'] = args['account-id'] \|\| '';\n }\n}\n\nconst Template = (args: GrossChartArgs) => {\n return (`\n <justifi-gross-payment-chart \n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n />\n `)\n}\n\nexport const Basic = Template.bind({});\nBasic.args = new GrossChartArgs({});\n"]}
1	+ {"version":3,"file":"gross-payment-chart.stories.js","sourceRoot":"","sources":["../../../../src/components/gross-payment-chart/gross-payment-chart.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,kCAAkC;EACzC,SAAS,EAAE,6BAA6B;EACxC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,cAAc;EAIlB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,cAAc,CAAC;IACjE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;EACrE,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAoB,EAAE,EAAE;EACxC,OAAO,CAAC;;oBAEU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { config } from \"../../../config\";\n\nexport default {\n title: 'dev/Components/GrossPaymentChart',\n component: 'justifi-gross-payment-chart',\n parameters: {}\n};\n\nclass GrossChartArgs {\n 'auth-token': string;\n 'account-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| config.proxyAuthToken;\n this['account-id'] = args['account-id'] \|\| config.exampleAccountId;\n }\n}\n\nconst Template = (args: GrossChartArgs) => {\n return (`\n <justifi-gross-payment-chart \n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n />\n `)\n}\n\nexport const Basic = Template.bind({});\nBasic.args = new GrossChartArgs({});\n"]}

package/dist/collection/components/payment-balance-transactions/payment-balance-transactions.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { Api, PaymentBalanceTransaction, pagingDefaults, } from "../../api";
 import { formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable, } from "../../utils/utils";
+import { config } from "../../../config";
 export class PaymentBalanceTransactions {
   constructor() {
     this.handleClickPrevious = (beforeCursor) => {
@@ -36,7 +37,7 @@ export class PaymentBalanceTransactions {
       return;
     }
     const endpoint = `account/${this.accountId}/payments/${this.paymentId}/payment_balance_transactions`;
-    const response = await Api(this.authToken).get(endpoint, this.params);
+    const response = await Api(this.authToken, config.proxyApiOrigin).get(endpoint, this.params);
     if (!response.error) {
       this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
       this.balanceTransactions = response.data.map(dataItem => new PaymentBalanceTransaction(dataItem));

package/dist/collection/components/payment-balance-transactions/payment-balance-transactions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"payment-balance-transactions.js","sourceRoot":"","sources":["../../../../src/components/payment-balance-transactions/payment-balance-transactions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EACL,GAAG,EAIH,yBAAyB,EACzB,cAAc,GACf,MAAM,WAAW,CAAC;AAEnB,OAAO,EACL,cAAc,EACd,UAAU,EACV,UAAU,EACV,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;~~AAO3B~~,MAAM,OAAO,0BAA0B;;IAmBrC,wBAAmB,GAAG,CAAC,YAAoB,EAAE,EAAE;MAC7C,MAAM,SAAS,qBAAa,IAAI,CAAC,MAAM,CAAE,CAAC;MAC1C,OAAO,SAAS,CAAC,YAAY,CAAC;MAC9B,IAAI,CAAC,MAAM,GAAG,iCAAM,SAAS,KAAE,aAAa,EAAE,YAAY,IAAG,CAAC;IAChE,CAAC,CAAC;IAEF,oBAAe,GAAG,CAAC,WAAmB,EAAE,EAAE;MACxC,MAAM,SAAS,qBAAa,IAAI,CAAC,MAAM,CAAE,CAAC;MAC1C,OAAO,SAAS,CAAC,aAAa,CAAC;MAC/B,IAAI,CAAC,MAAM,GAAG,iCAAM,SAAS,KAAE,YAAY,EAAE,WAAW,IAAG,CAAC;IAC9D,CAAC,CAAC;;;;+BAzB2D,EAAE;mBACnC,IAAI;;kBAEF,cAAc;;;EAI5C,kBAAkB;IAChB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAcD,KAAK,CAAC,SAAS;IACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IAEpB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACtC,IAAI,CAAC,YAAY,GAAG,gDAAgD,CAAC;MACrE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,OAAO;KACR;IACD,MAAM,QAAQ,GAAG,WAAW,IAAI,CAAC,SAAS,aAAa,IAAI,CAAC,SAAS,+BAA+B,CAAC;IAErG,MAAM,QAAQ,GACZ,MAAM,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;~~IAEvD~~,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;MACnB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,GACX,QAAQ,CAAC,SAAS,CACtB,CAAC;MACF,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,CAC1C,QAAQ,CAAC,EAAE,CAAC,IAAI,yBAAyB,CAAC,QAAQ,CAAC,CACpD,CAAC;KACH;SAAM;MACL,IAAI,CAAC,YAAY;QACf,OAAO,QAAQ,CAAC,KAAK,KAAK,QAAQ;UAChC,CAAC,CAAC,QAAQ,CAAC,KAAK;UAChB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC;KAC9B;IACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACvB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,qBACE,UAAU,EAAE;UACV,CAAC,cAAc,EAAE,oCAAoC,CAAC;UACtD,CAAC,MAAM,EAAE,8BAA8B,CAAC;UACxC,CAAC,IAAI,EAAE,2CAA2C,CAAC;UACnD,CAAC,OAAO,EAAE,uCAAuC,CAAC;UAClD;YACE,SAAS;YACT,8DAA8D;WAC/D;SACF,EACD,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,EACrE,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;UAC1D;YACE,eAAM,UAAU,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAO;YACtD,eAAM,UAAU,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAO,CAClD;UACN,wBAAwB,CACtB,kBAAkB,CAAC,wBAAwB,CAC5C;UACD,kBAAkB,CAAC,UAAU;UAC7B,cAAc,CAAC,kBAAkB,CAAC,MAAM,CAAC;UACzC,cAAc,CAAC,kBAAkB,CAAC,OAAO,CAAC;SAC3C,CAAC,EACF,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,IAAI,CAAC,YAAY,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,kCACD,IAAI,CAAC,MAAM,KACd,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,MAE/C,CACG,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport {\n Api,\n IApiResponseCollection,\n IPaymentBalanceTransaction,\n PagingInfo,\n PaymentBalanceTransaction,\n pagingDefaults,\n} from '../../api';\n\nimport {\n formatCurrency,\n formatDate,\n formatTime,\n snakeCaseToHumanReadable,\n} from '../../utils/utils';\n\n@Component({\n tag: 'justifi-payment-balance-transactions',\n styleUrl: 'payment-balance-transactions.scss',\n shadow: true,\n})\nexport class PaymentBalanceTransactions {\n @Prop() accountId: string;\n @Prop() authToken: string;\n @Prop() paymentId: string;\n @State() balanceTransactions: IPaymentBalanceTransaction[] = [];\n @State() loading: boolean = true;\n @State() errorMessage: string;\n @State() paging: PagingInfo = pagingDefaults;\n @State() params: any\n\n @Watch('params')\n updateOnPropChange() {\n this.fetchData();\n }\n\n connectedCallback() {\n this.fetchData();\n }\n\n handleClickPrevious = (beforeCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.after_cursor;\n this.params = ({ ...newParams, before_cursor: beforeCursor });\n };\n\n handleClickNext = (afterCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.before_cursor;\n this.params = ({ ...newParams, after_cursor: afterCursor });\n }~~; \~~n\n async fetchData(): Promise<void> {\n this.loading = true;\n\n if (!this.accountId \|\| !this.paymentId) {\n this.errorMessage = 'Missing required props: accountId or paymentId';\n this.loading = false;\n return;\n }\n const endpoint = `account/${this.accountId}/payments/${this.paymentId}/payment_balance_transactions`;\n\n const response: IApiResponseCollection<IPaymentBalanceTransaction[]> =\n await Api(this.authToken).get(endpoint, this.params);\n\n if (!response.error) {\n this.paging = {\n ...this.paging,\n ...response.page_info,\n };\n this.balanceTransactions = response.data.map(\n dataItem => new PaymentBalanceTransaction(dataItem),\n );\n } else {\n this.errorMessage =\n typeof response.error === 'string'\n ? response.error\n : response.error.message;\n }\n this.loading = false;\n }\n\n render() {\n return (\n <Host>\n <justifi-table\n columnData={[\n ['Processed On', 'The date each transaction occurred'],\n ['Type', 'The type of each transaction'],\n ['ID', 'The unique identifier of each transaction'],\n ['Amout', 'The dollar amount of each transaction'],\n [\n 'Balance',\n 'The running total amount of this payment that belongs to you',\n ],\n ]}\n entityId={this.balanceTransactions.map(transaction => transaction.id)}\n rowData={this.balanceTransactions.map(balanceTransaction => [\n <div>\n <div>{formatDate(balanceTransaction.created_at)}</div>\n <div>{formatTime(balanceTransaction.created_at)}</div>\n </div>,\n snakeCaseToHumanReadable(\n balanceTransaction.payment_balance_txn_type,\n ),\n balanceTransaction.payment_id,\n formatCurrency(balanceTransaction.amount),\n formatCurrency(balanceTransaction.balance),\n ])}\n loading={this.loading}\n error-message={this.errorMessage}\n params={this.params}\n paging={{\n ...this.paging,\n handleClickNext: this.handleClickNext,\n handleClickPrevious: this.handleClickPrevious\n }}\n />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"payment-balance-transactions.js","sourceRoot":"","sources":["../../../../src/components/payment-balance-transactions/payment-balance-transactions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EACL,GAAG,EAIH,yBAAyB,EACzB,cAAc,GACf,MAAM,WAAW,CAAC;AAEnB,OAAO,EACL,cAAc,EACd,UAAU,EACV,UAAU,EACV,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAOzC,MAAM,OAAO,0BAA0B;;IAmBrC,wBAAmB,GAAG,CAAC,YAAoB,EAAE,EAAE;MAC7C,MAAM,SAAS,qBAAa,IAAI,CAAC,MAAM,CAAE,CAAC;MAC1C,OAAO,SAAS,CAAC,YAAY,CAAC;MAC9B,IAAI,CAAC,MAAM,GAAG,iCAAM,SAAS,KAAE,aAAa,EAAE,YAAY,IAAG,CAAC;IAChE,CAAC,CAAC;IAEF,oBAAe,GAAG,CAAC,WAAmB,EAAE,EAAE;MACxC,MAAM,SAAS,qBAAa,IAAI,CAAC,MAAM,CAAE,CAAC;MAC1C,OAAO,SAAS,CAAC,aAAa,CAAC;MAC/B,IAAI,CAAC,MAAM,GAAG,iCAAM,SAAS,KAAE,YAAY,EAAE,WAAW,IAAG,CAAC;IAC9D,CAAC,CAAC;;;;+BAzB2D,EAAE;mBACnC,IAAI;;kBAEF,cAAc;;;EAI5C,kBAAkB;IAChB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAcD,KAAK,CAAC,SAAS;IACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IAEpB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACtC,IAAI,CAAC,YAAY,GAAG,gDAAgD,CAAC;MACrE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,OAAO;KACR;IACD,MAAM,QAAQ,GAAG,WAAW,IAAI,CAAC,SAAS,aAAa,IAAI,CAAC,SAAS,+BAA+B,CAAC;IAErG,MAAM,QAAQ,GACZ,MAAM,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAE9E,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;MACnB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,GACX,QAAQ,CAAC,SAAS,CACtB,CAAC;MACF,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,GAAG,CAC1C,QAAQ,CAAC,EAAE,CAAC,IAAI,yBAAyB,CAAC,QAAQ,CAAC,CACpD,CAAC;KACH;SAAM;MACL,IAAI,CAAC,YAAY;QACf,OAAO,QAAQ,CAAC,KAAK,KAAK,QAAQ;UAChC,CAAC,CAAC,QAAQ,CAAC,KAAK;UAChB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC;KAC9B;IACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACvB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,qBACE,UAAU,EAAE;UACV,CAAC,cAAc,EAAE,oCAAoC,CAAC;UACtD,CAAC,MAAM,EAAE,8BAA8B,CAAC;UACxC,CAAC,IAAI,EAAE,2CAA2C,CAAC;UACnD,CAAC,OAAO,EAAE,uCAAuC,CAAC;UAClD;YACE,SAAS;YACT,8DAA8D;WAC/D;SACF,EACD,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,EACrE,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;UAC1D;YACE,eAAM,UAAU,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAO;YACtD,eAAM,UAAU,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAO,CAClD;UACN,wBAAwB,CACtB,kBAAkB,CAAC,wBAAwB,CAC5C;UACD,kBAAkB,CAAC,UAAU;UAC7B,cAAc,CAAC,kBAAkB,CAAC,MAAM,CAAC;UACzC,cAAc,CAAC,kBAAkB,CAAC,OAAO,CAAC;SAC3C,CAAC,EACF,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,IAAI,CAAC,YAAY,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,kCACD,IAAI,CAAC,MAAM,KACd,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,MAE/C,CACG,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport {\n Api,\n IApiResponseCollection,\n IPaymentBalanceTransaction,\n PagingInfo,\n PaymentBalanceTransaction,\n pagingDefaults,\n} from '../../api';\n\nimport {\n formatCurrency,\n formatDate,\n formatTime,\n snakeCaseToHumanReadable,\n} from '../../utils/utils';\nimport { config } from '../../../config';\n\n@Component({\n tag: 'justifi-payment-balance-transactions',\n styleUrl: 'payment-balance-transactions.scss',\n shadow: true,\n})\nexport class PaymentBalanceTransactions {\n @Prop() accountId: string;\n @Prop() authToken: string;\n @Prop() paymentId: string;\n @State() balanceTransactions: IPaymentBalanceTransaction[] = [];\n @State() loading: boolean = true;\n @State() errorMessage: string;\n @State() paging: PagingInfo = pagingDefaults;\n @State() params: any\n\n @Watch('params')\n updateOnPropChange() {\n this.fetchData();\n }\n\n connectedCallback() {\n this.fetchData();\n }\n\n handleClickPrevious = (beforeCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.after_cursor;\n this.params = ({ ...newParams, before_cursor: beforeCursor });\n };\n\n handleClickNext = (afterCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.before_cursor;\n this.params = ({ ...newParams, after_cursor: afterCursor });\n };\n\n async fetchData(): Promise<void> {\n this.loading = true;\n\n if (!this.accountId \|\| !this.paymentId) {\n this.errorMessage = 'Missing required props: accountId or paymentId';\n this.loading = false;\n return;\n }\n const endpoint = `account/${this.accountId}/payments/${this.paymentId}/payment_balance_transactions`;\n\n const response: IApiResponseCollection<IPaymentBalanceTransaction[]> =\n await Api(this.authToken, config.proxyApiOrigin).get(endpoint, this.params);\n\n if (!response.error) {\n this.paging = {\n ...this.paging,\n ...response.page_info,\n };\n this.balanceTransactions = response.data.map(\n dataItem => new PaymentBalanceTransaction(dataItem),\n );\n } else {\n this.errorMessage =\n typeof response.error === 'string'\n ? response.error\n : response.error.message;\n }\n this.loading = false;\n }\n\n render() {\n return (\n <Host>\n <justifi-table\n columnData={[\n ['Processed On', 'The date each transaction occurred'],\n ['Type', 'The type of each transaction'],\n ['ID', 'The unique identifier of each transaction'],\n ['Amout', 'The dollar amount of each transaction'],\n [\n 'Balance',\n 'The running total amount of this payment that belongs to you',\n ],\n ]}\n entityId={this.balanceTransactions.map(transaction => transaction.id)}\n rowData={this.balanceTransactions.map(balanceTransaction => [\n <div>\n <div>{formatDate(balanceTransaction.created_at)}</div>\n <div>{formatTime(balanceTransaction.created_at)}</div>\n </div>,\n snakeCaseToHumanReadable(\n balanceTransaction.payment_balance_txn_type,\n ),\n balanceTransaction.payment_id,\n formatCurrency(balanceTransaction.amount),\n formatCurrency(balanceTransaction.balance),\n ])}\n loading={this.loading}\n error-message={this.errorMessage}\n params={this.params}\n paging={{\n ...this.paging,\n handleClickNext: this.handleClickNext,\n handleClickPrevious: this.handleClickPrevious\n }}\n />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/payment-balance-transactions/payment-balance-transactions.stories.js CHANGED Viewed

@@ -1,13 +1,14 @@
+import { config } from "../../../config";
 export default {
-  title: 'Components/PaymentBalanceTransactions',
+  title: 'dev/Components/PaymentBalanceTransactions',
   component: 'justifi-payment-balance-transactions',
   parameters: {},
 };
 class PaymentBalanceTransactionsArgs {
   constructor(args) {
-    this['auth-token'] = args['auth-token'] || '';
-    this['payment-id'] = args['payment-id'] || '';
-    this['account-id'] = args['account-id'] || '';
+    this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
+    this['payment-id'] = args['payment-id'] || config.examplePaymentId;
+    this['account-id'] = args['account-id'] || config.exampleAccountId;
   }
 }
 const Template = (args) => {

package/dist/collection/components/payment-balance-transactions/payment-balance-transactions.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"payment-balance-transactions.stories.js","sourceRoot":"","sources":["../../../../src/components/payment-balance-transactions/payment-balance-transactions.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,~~uCAAuC~~;~~EAC9C~~,SAAS,EAAE,sCAAsC;EACjD,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,8BAA8B;EAKlC,YAAc,IAAI;IAChB,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,~~EAAE~~,CAAC;~~IAC9C~~,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,~~EAAE~~,CAAC;~~IAC9C~~,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,~~EAAE~~,CAAC;~~EAChD~~,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAoC,EAAE,EAAE;EACxD,OAAO;;;oBAGW,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,8BAA8B,CAAC,EAAE,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,8BAA8B,CAAC,EAAE,CAAC,CAAC;AACrD,MAAM,CAAC,UAAU,GAAG;EAClB,KAAK,CAAC,EAAE,CAAC;MACL,KAAK,EAAE;GACV;CACF,CAAC","sourcesContent":["~~export~~ default {\n title: 'Components/PaymentBalanceTransactions',\n component: 'justifi-payment-balance-transactions',\n parameters: {},\n};\n\nclass PaymentBalanceTransactionsArgs {\n 'auth-token': string;\n 'payment-id': string;\n 'account-id': string;\n\n 'constructor'(args) {\n this['auth-token'] = args['auth-token'] \|\| '';\n this['payment-id'] = args['payment-id'] \|\| '';\n this['account-id'] = args['account-id'] \|\| '';\n }\n}\n\nconst Template = (args: PaymentBalanceTransactionsArgs) => {\n return `\n <justifi-payment-balance-transactions\n data-testid=\"justifi-payment-balance-transactions\"\n auth-token=\"${args['auth-token']}\"\n payment-id=\"${args['payment-id']}\"\n account-id=\"${args['account-id']}\"\n />\n `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PaymentBalanceTransactionsArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PaymentBalanceTransactionsArgs({});\nStyled.decorators = [\n Story => `\n ${Story()}\n `,\n];\n"]}
1	+ {"version":3,"file":"payment-balance-transactions.stories.js","sourceRoot":"","sources":["../../../../src/components/payment-balance-transactions/payment-balance-transactions.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,2CAA2C;EAClD,SAAS,EAAE,sCAAsC;EACjD,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,8BAA8B;EAKlC,YAAc,IAAI;IAChB,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,cAAc,CAAC;IACjE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;IACnE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;EACrE,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAoC,EAAE,EAAE;EACxD,OAAO;;;oBAGW,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,8BAA8B,CAAC,EAAE,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,8BAA8B,CAAC,EAAE,CAAC,CAAC;AACrD,MAAM,CAAC,UAAU,GAAG;EAClB,KAAK,CAAC,EAAE,CAAC;MACL,KAAK,EAAE;GACV;CACF,CAAC","sourcesContent":["import { config } from \"../../../config\";\n\nexport default {\n title: 'dev/Components/PaymentBalanceTransactions',\n component: 'justifi-payment-balance-transactions',\n parameters: {},\n};\n\nclass PaymentBalanceTransactionsArgs {\n 'auth-token': string;\n 'payment-id': string;\n 'account-id': string;\n\n 'constructor'(args) {\n this['auth-token'] = args['auth-token'] \|\| config.proxyAuthToken;\n this['payment-id'] = args['payment-id'] \|\| config.examplePaymentId;\n this['account-id'] = args['account-id'] \|\| config.exampleAccountId;\n }\n}\n\nconst Template = (args: PaymentBalanceTransactionsArgs) => {\n return `\n <justifi-payment-balance-transactions\n data-testid=\"justifi-payment-balance-transactions\"\n auth-token=\"${args['auth-token']}\"\n payment-id=\"${args['payment-id']}\"\n account-id=\"${args['account-id']}\"\n />\n `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PaymentBalanceTransactionsArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PaymentBalanceTransactionsArgs({});\nStyled.decorators = [\n Story => `\n ${Story()}\n `,\n];\n"]}

package/dist/collection/components/payment-details/payment-details.js CHANGED Viewed

@@ -60,10 +60,8 @@ export class PaymentDetails {
     this.loading = false;
   }
   render() {
-    var _a;
-    return (h(Host, null, this.loading ? LoadingState :
-      !this.payment ? ErrorState(this.errorMessage) :
-        h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge((_a = this.payment) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.payment.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { title: "Payment ID", value: this.payment.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { title: "Description", value: this.payment.description })), h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: this.payment.payment_method.card.acct_last_four }), h(DetailItem, { title: "Brand", value: this.payment.payment_method.card.brand }), h(DetailItem, { title: "Cardholder", value: this.payment.payment_method.card.name })), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: this.payment.metadata }))))));
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+    return (h(Host, null, this.loading && LoadingState, !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payment && (h("justifi-details", { "error-message": this.errorMessage }, h(EntityHeadInfo, { slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge((_a = this.payment) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Updated At", value: `${formatDate((_b = this.payment) === null || _b === void 0 ? void 0 : _b.updated_at)} ${formatTime((_c = this.payment) === null || _c === void 0 ? void 0 : _c.updated_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate((_d = this.payment) === null || _d === void 0 ? void 0 : _d.created_at)} ${formatTime((_e = this.payment) === null || _e === void 0 ? void 0 : _e.created_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: (_f = this.payment) === null || _f === void 0 ? void 0 : _f.id })), h("div", { slot: 'detail-sections' }, h(DetailSection, { sectionTitle: "Details" }, h(DetailItem, { title: "Amount", value: formatCurrency((_g = this.payment) === null || _g === void 0 ? void 0 : _g.amount) }), h(DetailItem, { title: "Fees", value: formatCurrency((_h = this.payment) === null || _h === void 0 ? void 0 : _h.fee_amount) }), h(DetailItem, { title: "Refunded", value: formatCurrency((_j = this.payment) === null || _j === void 0 ? void 0 : _j.amount_refunded) }), h(DetailItem, { title: "Net", value: formatCurrency((_k = this.payment) === null || _k === void 0 ? void 0 : _k.balance) }), h(DetailItem, { title: "Status", value: MapPaymentStatusToBadge((_l = this.payment) === null || _l === void 0 ? void 0 : _l.status) }), h(DetailItem, { title: "Payment ID", value: (_m = this.payment) === null || _m === void 0 ? void 0 : _m.id }), h(DetailItem, { title: "Processing Fees", value: formatCurrency((_o = this.payment) === null || _o === void 0 ? void 0 : _o.fee_amount) }), h(DetailItem, { title: "Statement Descriptor", value: (_p = this.payment) === null || _p === void 0 ? void 0 : _p.statement_descriptor }), h(DetailItem, { title: "Description", value: (_q = this.payment) === null || _q === void 0 ? void 0 : _q.description })), ((_r = this.payment) === null || _r === void 0 ? void 0 : _r.payment_method.card) && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: (_s = this.payment) === null || _s === void 0 ? void 0 : _s.payment_method.card.id }), h(DetailItem, { title: "Payment Type", value: "Card" }), h(DetailItem, { title: "Last 4 Numbers", value: (_t = this.payment) === null || _t === void 0 ? void 0 : _t.payment_method.card.acct_last_four }), h(DetailItem, { title: "Brand", value: (_u = this.payment) === null || _u === void 0 ? void 0 : _u.payment_method.card.brand }), h(DetailItem, { title: "Cardholder", value: (_v = this.payment) === null || _v === void 0 ? void 0 : _v.payment_method.card.name }))), ((_w = this.payment) === null || _w === void 0 ? void 0 : _w.payment_method.bank_account) && (h(DetailSection, { sectionTitle: "Payment Method" }, h(DetailItem, { title: "ID", value: (_x = this.payment) === null || _x === void 0 ? void 0 : _x.payment_method.bank_account.id }), h(DetailItem, { title: "Last 4 Numbers", value: (_y = this.payment) === null || _y === void 0 ? void 0 : _y.payment_method.bank_account.acct_last_four }), h(DetailItem, { title: "Bank Name", value: (_z = this.payment) === null || _z === void 0 ? void 0 : _z.payment_method.bank_account.bank_name }), h(DetailItem, { title: "Account Owner", value: (_0 = this.payment) === null || _0 === void 0 ? void 0 : _0.payment_method.bank_account.account_owner_name }))), h(DetailSection, { sectionTitle: 'Metadata' }, h(CodeBlock, { metadata: (_1 = this.payment) === null || _1 === void 0 ? void 0 : _1.metadata })))))));
   }
   static get is() { return "justifi-payment-details"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/payment-details/payment-details.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"payment-details.js","sourceRoot":"","sources":["../../../../src/components/payment-details/payment-details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection, Payment } from '../../api';\nimport { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from '../../utils/utils';\nimport { CodeBlock, DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from '../details/utils';\nimport { config } from '../../../config';\n\n/*\n @exportedPart detail-loading-spinner\n * @exportedPart detail-loading-state\n * @exportedPart detail-empty-state\n * @exportedPart detail-head\n * @exportedPart detail-title\n * @exportedPart detail-method\n * @exportedPart detail-info\n * @exportedPart detail-info-item\n * @exportedPart detail-info-item-title\n * @exportedPart detail-info-item-data\n * @exportedPart detail-metadata\n * @exportedPart detail-metadata-title\n * @exportedPart detail-method-title\n * @exportedPart detail-method-data\n * @exportedPart detail-section\n * @exportedPart detail-section-title\n * @exportedPart detail-section-item-title\n * @exportedPart detail-section-item-data\n * @exportedPart detail-head-info\n * @exportedPart detail-head-info-item\n * @exportedPart detail-head-info-item-title\n * @exportedPart detail-head-info-item-data\n*/\n@Component({\n tag: 'justifi-payment-details',\n styleUrl: 'payment-details.scss',\n shadow: true,\n})\n\nexport class PaymentDetails {\n @Prop() paymentId: string;\n @Prop() authToken: string;\n @State() payment: Payment;\n @State() loading: boolean = true;\n @State() errorMessage: string;\n\n @Watch('paymentId')\n @Watch('authToken')\n updateOnPropChange() {\n this.fetchData();\n }\n\n connectedCallback() {\n this.fetchData();\n }\n\n async fetchData(): Promise<void> {\n this.errorMessage = '';\n if (!this.paymentId \|\| !this.authToken) {\n this.errorMessage = \"Can not fetch any data without a PaymentID and an AuthToken\";\n this.loading = false;\n return;\n }\n this.loading = true;\n const endpoint = `payments/${this.paymentId}`;\n\n const response: IApiResponseCollection<Payment> = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);\n if (!response.error) {\n this.payment = response.data;\n } else {\n this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n }\n\n this.loading = false;\n }\n\n render() {\n return (\n <Host>\n {\n this.loading ? LoadingState :\n !this.payment ? ErrorState(this.errorMessage) :\n <justifi-details error-message={this.errorMessage}>\n <EntityHeadInfo slot=\"head-info\" badge={<span slot='badge' innerHTML={MapPaymentStatusToBadge(this.payment?.status)} />} title={`${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}`}>\n <EntityHeadInfoItem\n classes=\"border-1 border-end\"\n title=\"Updated At\"\n value={`${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}`}\n />\n <EntityHeadInfoItem\n classes=\"border-1 border-end\"\n title=\"Created At\"\n value={`${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}`}\n />\n <EntityHeadInfoItem title=\"ID\" value={this.payment.id} />\n </EntityHeadInfo>\n <div slot='detail-sections'>\n <DetailSection sectionTitle=\"Details\">\n <DetailItem title=\"Amount\" value={formatCurrency(this.payment.amount)} />\n <DetailItem title=\"Fees\" value={formatCurrency(this.payment.fee_amount)} />\n <DetailItem title=\"Refunded\" value={formatCurrency(this.payment.amount_refunded)} />\n <DetailItem title=\"Net\" value={formatCurrency(this.payment.balance)} />\n <DetailItem title=\"Status\" value={MapPaymentStatusToBadge(this.payment.status)} />\n <DetailItem title=\"Payment ID\" value={this.payment.id} />\n <DetailItem title=\"Processing Fees\" value={formatCurrency(this.payment.fee_amount)} />\n <DetailItem title=\"Statement Descriptor\" value={this.payment.statement_descriptor} />\n <DetailItem title=\"Description\" value={this.payment.description} />\n </DetailSection>\n <DetailSection sectionTitle=\"Payment Method\">\n <DetailItem title=\"ID\" value={this.payment.payment_method.card.id} />\n <DetailItem title=\"Payment Type\" value=\"Card\" />\n <DetailItem title=\"Last 4 Numbers\" value={this.payment.payment_method.card.acct_last_four} />\n <DetailItem title=\"Brand\" value={this.payment.payment_method.card.brand} />\n <DetailItem title=\"Cardholder\" value={this.payment.payment_method.card.name} />\n </DetailSection>\n <DetailSection sectionTitle='Metadata'>\n <CodeBlock metadata={this.payment.metadata} />\n </DetailSection>\n </div>\n </justifi-details>\n }\n </Host>\n );\n }\n}"]}
1	+ {"version":3,"file":"payment-details.js","sourceRoot":"","sources":["../../../../src/components/payment-details/payment-details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection, Payment } from '../../api';\nimport { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from '../../utils/utils';\nimport { CodeBlock, DetailItem, DetailSection, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from '../details/utils';\nimport { config } from '../../../config';\n\n/*\n @exportedPart detail-loading-spinner\n * @exportedPart detail-loading-state\n * @exportedPart detail-empty-state\n * @exportedPart detail-head\n * @exportedPart detail-title\n * @exportedPart detail-method\n * @exportedPart detail-info\n * @exportedPart detail-info-item\n * @exportedPart detail-info-item-title\n * @exportedPart detail-info-item-data\n * @exportedPart detail-metadata\n * @exportedPart detail-metadata-title\n * @exportedPart detail-method-title\n * @exportedPart detail-method-data\n * @exportedPart detail-section\n * @exportedPart detail-section-title\n * @exportedPart detail-section-item-title\n * @exportedPart detail-section-item-data\n * @exportedPart detail-head-info\n * @exportedPart detail-head-info-item\n * @exportedPart detail-head-info-item-title\n * @exportedPart detail-head-info-item-data\n*/\n@Component({\n tag: 'justifi-payment-details',\n styleUrl: 'payment-details.scss',\n shadow: true,\n})\n\nexport class PaymentDetails {\n @Prop() paymentId: string;\n @Prop() authToken: string;\n @State() payment: Payment;\n @State() loading: boolean = true;\n @State() errorMessage: string;\n\n @Watch('paymentId')\n @Watch('authToken')\n updateOnPropChange() {\n this.fetchData();\n }\n\n connectedCallback() {\n this.fetchData();\n }\n\n async fetchData(): Promise<void> {\n this.errorMessage = '';\n if (!this.paymentId \|\| !this.authToken) {\n this.errorMessage = \"Can not fetch any data without a PaymentID and an AuthToken\";\n this.loading = false;\n return;\n }\n this.loading = true;\n const endpoint = `payments/${this.paymentId}`;\n const response: IApiResponseCollection<Payment> = await Api(this.authToken, config.proxyApiOrigin).get(endpoint);\n\n if (!response.error) {\n this.payment = response.data;\n } else {\n this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n }\n\n this.loading = false;\n }\n\n render() {\n return (\n <Host>\n {this.loading && LoadingState}\n {!this.loading && this.errorMessage && ErrorState(this.errorMessage)}\n {!this.loading && this.payment && (\n <justifi-details error-message={this.errorMessage}>\n <EntityHeadInfo slot=\"head-info\" badge={<span slot='badge' innerHTML={MapPaymentStatusToBadge(this.payment?.status)} />} title={`${formatCurrency(this.payment.amount)} ${this.payment.currency.toUpperCase()}`}>\n <EntityHeadInfoItem\n classes=\"border-1 border-end\"\n title=\"Updated At\"\n value={`${formatDate(this.payment?.updated_at)} ${formatTime(this.payment?.updated_at)}`}\n />\n <EntityHeadInfoItem\n classes=\"border-1 border-end\"\n title=\"Created At\"\n value={`${formatDate(this.payment?.created_at)} ${formatTime(this.payment?.created_at)}`}\n />\n <EntityHeadInfoItem title=\"ID\" value={this.payment?.id} />\n </EntityHeadInfo>\n <div slot='detail-sections'>\n <DetailSection sectionTitle=\"Details\">\n <DetailItem title=\"Amount\" value={formatCurrency(this.payment?.amount)} />\n <DetailItem title=\"Fees\" value={formatCurrency(this.payment?.fee_amount)} />\n <DetailItem title=\"Refunded\" value={formatCurrency(this.payment?.amount_refunded)} />\n <DetailItem title=\"Net\" value={formatCurrency(this.payment?.balance)} />\n <DetailItem title=\"Status\" value={MapPaymentStatusToBadge(this.payment?.status)} />\n <DetailItem title=\"Payment ID\" value={this.payment?.id} />\n <DetailItem title=\"Processing Fees\" value={formatCurrency(this.payment?.fee_amount)} />\n <DetailItem title=\"Statement Descriptor\" value={this.payment?.statement_descriptor} />\n <DetailItem title=\"Description\" value={this.payment?.description} />\n </DetailSection>\n {this.payment?.payment_method.card && (\n <DetailSection sectionTitle=\"Payment Method\">\n <DetailItem title=\"ID\" value={this.payment?.payment_method.card.id} />\n <DetailItem title=\"Payment Type\" value=\"Card\" />\n <DetailItem title=\"Last 4 Numbers\" value={this.payment?.payment_method.card.acct_last_four} />\n <DetailItem title=\"Brand\" value={this.payment?.payment_method.card.brand} />\n <DetailItem title=\"Cardholder\" value={this.payment?.payment_method.card.name} />\n </DetailSection>\n )}\n {this.payment?.payment_method.bank_account && (\n <DetailSection sectionTitle=\"Payment Method\">\n <DetailItem title=\"ID\" value={this.payment?.payment_method.bank_account.id} />\n <DetailItem title=\"Last 4 Numbers\" value={this.payment?.payment_method.bank_account.acct_last_four} />\n <DetailItem title=\"Bank Name\" value={this.payment?.payment_method.bank_account.bank_name} />\n <DetailItem title=\"Account Owner\" value={this.payment?.payment_method.bank_account.account_owner_name} />\n </DetailSection>\n )}\n <DetailSection sectionTitle='Metadata'>\n <CodeBlock metadata={this.payment?.metadata} />\n </DetailSection>\n </div>\n </justifi-details>\n )}\n </Host>\n );\n }\n}"]}

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

@@ -71,6 +71,14 @@ export class PaymentsList {
   getPaymentMethod(paymentMethod) {
     return paymentMethod.card || paymentMethod.bank_account;
   }
+  getPaymentMethodName(paymentMethod) {
+    if (paymentMethod.card) {
+      return paymentMethod.card.name;
+    }
+    else {
+      return paymentMethod.bank_account.account_owner_name;
+    }
+  }
   render() {
     return (h(Host, null, h("justifi-table", { rowClickHandler: e => {
         const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
@@ -96,7 +104,7 @@ export class PaymentsList {
         },
         formatCurrency(payment.amount),
         payment.description,
-        this.getPaymentMethod(payment.payment_method).name,
+        this.getPaymentMethodName(payment.payment_method),
         this.getPaymentMethod(payment.payment_method).acct_last_four,
         {
           type: 'inner',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"payments-list.js","sourceRoot":"","sources":["../../../../src/components/payments-list/payments-list.tsx"],"names":[],"mappings":"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~~gBAAgB~~,CAAC,OAAO,CAAC,cAAc,CAAC~~,CAAC,IAAI~~;~~UAClD~~,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,cAAc;UAC5D;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC;WAC/C;UACD,OAAO,CAAC,EAAE;SACX,CACF,CAAC,EAEJ,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,IAAI,CAAC,YAAY,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,kCACD,IAAI,CAAC,MAAM,KACd,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,MAE/C,CACG,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport { Api, IApiResponseCollection, IPaymentMethod, PagingInfo, Payment, pagingDefaults } from '../../api';\nimport { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from '../../utils/utils';\nimport { config } from '../../../config';\n\n/*\n @exportedPart table-head: Table head\n * @exportedPart table-head-row: Head row\n * @exportedPart table-head-cell: Individual head cell\n * @exportedPart table-body: Body of the table\n * @exportedPart table-row: Row of the table\n * @exportedPart table-cell: Individual cell of the table\n * @exportedPart loading-state-cell: Row for loading state\n * @exportedPart loading-state-spinner: Spinner element for loading state\n * @exportedPart error-state: Row for Error state\n * @exportedPart empty-state: Row for Emtpy state\n * @exportedPart pagination-bar: Pagination bar\n * @exportedPart arrow: Both paging buttons\n * @exportedPart arrow-left: Previous page button\n * @exportedPart arrow-right: Next page button\n * @exportedPart button-disabled: Disabled state for paging buttons\n * @exportedPart previous-button-text: Text for Previous button\n * @exportedPart next-button-text: Text for Next button\n*/\n@Component({\n tag: 'justifi-payments-list',\n styleUrl: 'payments-list.scss',\n shadow: true,\n})\n\nexport class PaymentsList {\n @Prop() accountId: string;\n @Prop() authToken: string;\n @State() payments: Payment[] = [];\n @State() loading: boolean = true;\n @State() errorMessage: string;\n @State() paging: PagingInfo = pagingDefaults;\n @State() params: any;\n @Event({\n eventName: 'payment-row-clicked',\n bubbles: true,\n }) rowClicked: EventEmitter<Payment>;\n\n @Watch('accountId')\n @Watch('authToken')\n @Watch('params')\n updateOnPropChange() {\n this.fetchData();\n }\n\n connectedCallback() {\n this.fetchData();\n }\n\n handleClickPrevious = (beforeCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.after_cursor;\n this.params = ({ ...newParams, before_cursor: beforeCursor });\n };\n\n handleClickNext = (afterCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.before_cursor;\n this.params = ({ ...newParams, after_cursor: afterCursor });\n };\n\n async fetchData(): Promise<void> {\n if (!this.accountId \|\| !this.authToken) {\n this.errorMessage = \"Can not fetch any data without an AccountID and an AuthToken\";\n this.loading = false;\n return;\n }\n\n this.loading = true;\n\n const api = Api(this.authToken, config.proxyApiOrigin);\n const endpoint = `account/${this.accountId}/payments`;\n\n const response: IApiResponseCollection<Payment[]> = await api.get(endpoint, this.params);\n\n if (!response.error) {\n this.paging = {\n ...this.paging,\n ...response.page_info\n }\n\n const data = response?.data?.map(dataItem => new Payment(dataItem));\n this.payments = data;\n } else {\n this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n }\n\n this.loading = false;\n }\n\n getPaymentMethod(paymentMethod: IPaymentMethod) {\n return paymentMethod.card \|\| paymentMethod.bank_account\n }\n\n render() {\n return (\n <Host>\n <justifi-table\n rowClickHandler={e => {\n const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;\n if (!clickedPaymentID) { return }\n this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));\n }}\n entityId={this.payments.map((payment) => payment.id)}\n columnData={[\n ['Made On', 'The date and time each payment was made'],\n ['Amount', 'The dollar amount of each payment'],\n ['Description', 'The payment description, if you provided one'],\n ['Cardholder', 'The name associated with the payment method'],\n ['Payment Method', 'The brand and last 4 digits of the payment method'],\n ['Status', 'The current status of each payment'],\n ['Payment ID', 'The unique identifier of each payment']\n ]}\n rowData={\n this.payments.map((payment) => (\n [\n {\n type: 'head',\n value: `\n <div>${formatDate(payment.created_at)}</div>\n <div>${formatTime(payment.created_at)}</div>\n `,\n },\n formatCurrency(payment.amount),\n payment.description,\n this.~~getPaymentMethod~~(payment.payment_method)~~.name~~,\n this.getPaymentMethod(payment.payment_method).acct_last_four,\n {\n type: 'inner',\n value: MapPaymentStatusToBadge(payment.status)\n },\n payment.id\n ]\n ))\n }\n loading={this.loading}\n error-message={this.errorMessage}\n params={this.params}\n paging={{\n ...this.paging,\n handleClickNext: this.handleClickNext,\n handleClickPrevious: this.handleClickPrevious\n }}\n />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"payments-list.js","sourceRoot":"","sources":["../../../../src/components/payments-list/payments-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport { Api, IApiResponseCollection, IPaymentMethod, PagingInfo, Payment, pagingDefaults } from '../../api';\nimport { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from '../../utils/utils';\nimport { config } from '../../../config';\n\n/*\n @exportedPart table-head: Table head\n * @exportedPart table-head-row: Head row\n * @exportedPart table-head-cell: Individual head cell\n * @exportedPart table-body: Body of the table\n * @exportedPart table-row: Row of the table\n * @exportedPart table-cell: Individual cell of the table\n * @exportedPart loading-state-cell: Row for loading state\n * @exportedPart loading-state-spinner: Spinner element for loading state\n * @exportedPart error-state: Row for Error state\n * @exportedPart empty-state: Row for Emtpy state\n * @exportedPart pagination-bar: Pagination bar\n * @exportedPart arrow: Both paging buttons\n * @exportedPart arrow-left: Previous page button\n * @exportedPart arrow-right: Next page button\n * @exportedPart button-disabled: Disabled state for paging buttons\n * @exportedPart previous-button-text: Text for Previous button\n * @exportedPart next-button-text: Text for Next button\n*/\n@Component({\n tag: 'justifi-payments-list',\n styleUrl: 'payments-list.scss',\n shadow: true,\n})\n\nexport class PaymentsList {\n @Prop() accountId: string;\n @Prop() authToken: string;\n @State() payments: Payment[] = [];\n @State() loading: boolean = true;\n @State() errorMessage: string;\n @State() paging: PagingInfo = pagingDefaults;\n @State() params: any;\n @Event({\n eventName: 'payment-row-clicked',\n bubbles: true,\n }) rowClicked: EventEmitter<Payment>;\n\n @Watch('accountId')\n @Watch('authToken')\n @Watch('params')\n updateOnPropChange() {\n this.fetchData();\n }\n\n connectedCallback() {\n this.fetchData();\n }\n\n handleClickPrevious = (beforeCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.after_cursor;\n this.params = ({ ...newParams, before_cursor: beforeCursor });\n };\n\n handleClickNext = (afterCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.before_cursor;\n this.params = ({ ...newParams, after_cursor: afterCursor });\n };\n\n async fetchData(): Promise<void> {\n if (!this.accountId \|\| !this.authToken) {\n this.errorMessage = \"Can not fetch any data without an AccountID and an AuthToken\";\n this.loading = false;\n return;\n }\n\n this.loading = true;\n\n const api = Api(this.authToken, config.proxyApiOrigin);\n const endpoint = `account/${this.accountId}/payments`;\n\n const response: IApiResponseCollection<Payment[]> = await api.get(endpoint, this.params);\n\n if (!response.error) {\n this.paging = {\n ...this.paging,\n ...response.page_info\n }\n\n const data = response?.data?.map(dataItem => new Payment(dataItem));\n this.payments = data;\n } else {\n this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n }\n\n this.loading = false;\n }\n\n getPaymentMethod(paymentMethod: IPaymentMethod) {\n return paymentMethod.card \|\| paymentMethod.bank_account\n }\n\n getPaymentMethodName(paymentMethod: IPaymentMethod) {\n if (paymentMethod.card) {\n return paymentMethod.card.name;\n } else {\n return paymentMethod.bank_account.account_owner_name\n }\n }\n\n render() {\n return (\n <Host>\n <justifi-table\n rowClickHandler={e => {\n const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;\n if (!clickedPaymentID) { return }\n this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));\n }}\n entityId={this.payments.map((payment) => payment.id)}\n columnData={[\n ['Made On', 'The date and time each payment was made'],\n ['Amount', 'The dollar amount of each payment'],\n ['Description', 'The payment description, if you provided one'],\n ['Cardholder', 'The name associated with the payment method'],\n ['Payment Method', 'The brand and last 4 digits of the payment method'],\n ['Status', 'The current status of each payment'],\n ['Payment ID', 'The unique identifier of each payment']\n ]}\n rowData={\n this.payments.map((payment) => (\n [\n {\n type: 'head',\n value: `\n <div>${formatDate(payment.created_at)}</div>\n <div>${formatTime(payment.created_at)}</div>\n `,\n },\n formatCurrency(payment.amount),\n payment.description,\n this.getPaymentMethodName(payment.payment_method),\n this.getPaymentMethod(payment.payment_method).acct_last_four,\n {\n type: 'inner',\n value: MapPaymentStatusToBadge(payment.status)\n },\n payment.id\n ]\n ))\n }\n loading={this.loading}\n error-message={this.errorMessage}\n params={this.params}\n paging={{\n ...this.paging,\n handleClickNext: this.handleClickNext,\n handleClickPrevious: this.handleClickPrevious\n }}\n />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/payments-list/payments-list.stories.js CHANGED Viewed

@@ -17,7 +17,7 @@ export default {
 class PaymentsListArgs {
   constructor(args) {
     this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
-    this['account-id'] = args['account-id'] || config.examplePaymentsAccountId;
+    this['account-id'] = args['account-id'] || config.exampleAccountId;
   }
 }
 const Template = (args) => {

package/dist/collection/components/payments-list/payments-list.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"payments-list.stories.js","sourceRoot":"","sources":["../../../../src/components/payments-list/payments-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,gBAAgB;EAIpB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,cAAc,CAAC;IACjE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,~~wBAAwB~~,CAAC;~~EAC7E~~,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAsB,EAAE,EAAE;EAC1C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,UAAU,GAAG;EACrB,CAAC,KAAK,EAAE,EAAE,CAAC;;QAEL,KAAK,EAAE;;GAEZ;CACF,CAAA;AACD,SAAS,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n title: 'Components/PaymentsList',\n component: 'justifi-payments-list',\n parameters: {},\n decorators: [\n (Story) => `\n ${Story()}\n <script>\n window.addEventListener('payment-row-clicked', (e) => {\n console.log(e);\n })\n </script>\n `\n ]\n};\n\nclass PaymentsListArgs {\n 'auth-token': string;\n 'account-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| config.proxyAuthToken;\n this['account-id'] = args['account-id'] \|\| config.~~examplePaymentsAccountId~~;\n }\n}\n\nconst Template = (args: PaymentsListArgs) => {\n return (`\n <justifi-payments-list\n data-testid=\"justifi-payments-list\"\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n />\n `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PaymentsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PaymentsListArgs({});\nStyled.decorators = [\n (Story) => `\n ${Story()}\n <style>\n justifi-payments-list::part(table-head-cell) {\n background-color: #F4F4F6;\n }\n justifi-payments-list::part(pagination-bar) {\n background-color: #F4F4F6;\n }\n justifi-payments-list::part(arrow) {\n --bs-btn-disabled-bg: #212529;\n --bs-btn-disabled-border-color: #212529;\n --bs-btn-bg: #212529;\n --bs-btn-border-color: #212529;\n --bs-btn-hover-bg: #fccc32;\n --bs-btn-hover-border-color: #fccc32;\n }\n justifi-payments-list::part(error-state) {\n color: red;\n background-color: #EEEEF5;\n }\n justifi-payments-list::part(loading-state-cell) {\n background-color: #EEEEF5;\n }\n justifi-payments-list::part(table-row) {\n background-color: #EEEEF5;\n }\n justifi-payments-list::part(table-row-even) {\n background-color: #F4F4F6;\n }\n </style>\n `\n]\n\nexport const Contained = Template.bind({});\nContained.decorators = [\n (Story) => `\n <div style=\"position: relative; width: 900px; height: 300px; overflow-x: hidden;\">\n ${Story()}\n </div>\n `\n]\nContained.args = new PaymentsListArgs({});\n"]}
1	+ {"version":3,"file":"payments-list.stories.js","sourceRoot":"","sources":["../../../../src/components/payments-list/payments-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,gBAAgB;EAIpB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,cAAc,CAAC;IACjE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;EACrE,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAsB,EAAE,EAAE;EAC1C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,UAAU,GAAG;EACrB,CAAC,KAAK,EAAE,EAAE,CAAC;;QAEL,KAAK,EAAE;;GAEZ;CACF,CAAA;AACD,SAAS,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n title: 'Components/PaymentsList',\n component: 'justifi-payments-list',\n parameters: {},\n decorators: [\n (Story) => `\n ${Story()}\n <script>\n window.addEventListener('payment-row-clicked', (e) => {\n console.log(e);\n })\n </script>\n `\n ]\n};\n\nclass PaymentsListArgs {\n 'auth-token': string;\n 'account-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| config.proxyAuthToken;\n this['account-id'] = args['account-id'] \|\| config.exampleAccountId;\n }\n}\n\nconst Template = (args: PaymentsListArgs) => {\n return (`\n <justifi-payments-list\n data-testid=\"justifi-payments-list\"\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n />\n `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PaymentsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PaymentsListArgs({});\nStyled.decorators = [\n (Story) => `\n ${Story()}\n <style>\n justifi-payments-list::part(table-head-cell) {\n background-color: #F4F4F6;\n }\n justifi-payments-list::part(pagination-bar) {\n background-color: #F4F4F6;\n }\n justifi-payments-list::part(arrow) {\n --bs-btn-disabled-bg: #212529;\n --bs-btn-disabled-border-color: #212529;\n --bs-btn-bg: #212529;\n --bs-btn-border-color: #212529;\n --bs-btn-hover-bg: #fccc32;\n --bs-btn-hover-border-color: #fccc32;\n }\n justifi-payments-list::part(error-state) {\n color: red;\n background-color: #EEEEF5;\n }\n justifi-payments-list::part(loading-state-cell) {\n background-color: #EEEEF5;\n }\n justifi-payments-list::part(table-row) {\n background-color: #EEEEF5;\n }\n justifi-payments-list::part(table-row-even) {\n background-color: #F4F4F6;\n }\n </style>\n `\n]\n\nexport const Contained = Template.bind({});\nContained.decorators = [\n (Story) => `\n <div style=\"position: relative; width: 900px; height: 300px; overflow-x: hidden;\">\n ${Story()}\n </div>\n `\n]\nContained.args = new PaymentsListArgs({});\n"]}

package/dist/collection/components/payouts-list/payouts-list.stories.js CHANGED Viewed

@@ -17,7 +17,7 @@ export default {
 class PayoutsListArgs {
   constructor(args) {
     this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
-    this['account-id'] = args['account-id'] || config.examplePaymentsAccountId;
+    this['account-id'] = args['account-id'] || config.exampleAccountId;
   }
 }
 const Template = (args) => {

package/dist/collection/components/payouts-list/payouts-list.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"payouts-list.stories.js","sourceRoot":"","sources":["../../../../src/components/payouts-list/payouts-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,SAAS,EAAE,sBAAsB;EACjC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,eAAe;EAInB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,cAAc,CAAC;IACjE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,~~wBAAwB~~,CAAC;~~EAC7E~~,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAqB,EAAE,EAAE;EACzC,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAC;AAErC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n title: 'Components/PayoutsList',\n component: 'justifi-payouts-list',\n parameters: {},\n decorators: [\n (Story) => `\n ${Story()}\n <script>\n window.addEventListener('payout-row-clicked', (e) => {\n console.log(e);\n })\n </script>\n `\n ]\n};\n\nclass PayoutsListArgs {\n 'auth-token': string;\n 'account-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| config.proxyAuthToken;\n this['account-id'] = args['account-id'] \|\| config.~~examplePaymentsAccountId~~;\n }\n}\n\nconst Template = (args: PayoutsListArgs) => {\n return (`\n <justifi-payouts-list\n data-testid=\"justifi-payouts-list\"\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n />\n `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PayoutsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PayoutsListArgs({});\nStyled.decorators = [\n (Story) => `\n ${Story()}\n <style>\n justifi-payouts-list::part(table-head-cell) {\n background-color: #F4F4F6;\n }\n justifi-payouts-list::part(pagination-bar) {\n background-color: #F4F4F6;\n }\n justifi-payouts-list::part(arrow) {\n --bs-btn-disabled-bg: #212529;\n --bs-btn-disabled-border-color: #212529;\n --bs-btn-bg: #212529;\n --bs-btn-border-color: #212529;\n --bs-btn-hover-bg: #fccc32;\n --bs-btn-hover-border-color: #fccc32;\n }\n justifi-payouts-list::part(error-state) {\n color: red;\n background-color: #EEEEF5;\n }\n justifi-payouts-list::part(loading-state-cell) {\n background-color: #EEEEF5;\n }\n justifi-payouts-list::part(table-row) {\n background-color: #EEEEF5;\n }\n justifi-payouts-list::part(table-row-even) {\n background-color: #F4F4F6;\n }\n </style>\n `\n]\n"]}
1	+ {"version":3,"file":"payouts-list.stories.js","sourceRoot":"","sources":["../../../../src/components/payouts-list/payouts-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,SAAS,EAAE,sBAAsB;EACjC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,eAAe;EAInB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,cAAc,CAAC;IACjE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;EACrE,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAqB,EAAE,EAAE;EACzC,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAC;AAErC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,eAAe,CAAC,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n title: 'Components/PayoutsList',\n component: 'justifi-payouts-list',\n parameters: {},\n decorators: [\n (Story) => `\n ${Story()}\n <script>\n window.addEventListener('payout-row-clicked', (e) => {\n console.log(e);\n })\n </script>\n `\n ]\n};\n\nclass PayoutsListArgs {\n 'auth-token': string;\n 'account-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| config.proxyAuthToken;\n this['account-id'] = args['account-id'] \|\| config.exampleAccountId;\n }\n}\n\nconst Template = (args: PayoutsListArgs) => {\n return (`\n <justifi-payouts-list\n data-testid=\"justifi-payouts-list\"\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n />\n `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new PayoutsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new PayoutsListArgs({});\nStyled.decorators = [\n (Story) => `\n ${Story()}\n <style>\n justifi-payouts-list::part(table-head-cell) {\n background-color: #F4F4F6;\n }\n justifi-payouts-list::part(pagination-bar) {\n background-color: #F4F4F6;\n }\n justifi-payouts-list::part(arrow) {\n --bs-btn-disabled-bg: #212529;\n --bs-btn-disabled-border-color: #212529;\n --bs-btn-bg: #212529;\n --bs-btn-border-color: #212529;\n --bs-btn-hover-bg: #fccc32;\n --bs-btn-hover-border-color: #fccc32;\n }\n justifi-payouts-list::part(error-state) {\n color: red;\n background-color: #EEEEF5;\n }\n justifi-payouts-list::part(loading-state-cell) {\n background-color: #EEEEF5;\n }\n justifi-payouts-list::part(table-row) {\n background-color: #EEEEF5;\n }\n justifi-payouts-list::part(table-row-even) {\n background-color: #F4F4F6;\n }\n </style>\n `\n]\n"]}

package/dist/collection/components/proceeds-list/proceeds-list.stories.js CHANGED Viewed

@@ -17,7 +17,7 @@ export default {
 class ProceedsListArgs {
   constructor(args) {
     this['auth-token'] = args['auth-token'] || config.privateAuthToken;
-    this['account-id'] = args['account-id'] || config.examplePlatformAccountId;
+    this['account-id'] = args['account-id'] || '';
   }
 }
 const Template = (args) => {

package/dist/collection/components/proceeds-list/proceeds-list.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"proceeds-list.stories.js","sourceRoot":"","sources":["../../../../src/components/proceeds-list/proceeds-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,6BAA6B;EACpC,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,gBAAgB;EAIpB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;IACnE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,~~MAAM~~,CAAC~~,wBAAwB,CAAC~~;~~EAC7E~~,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAsB,EAAE,EAAE;EAC1C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n title: 'dev/Components/ProceedsList',\n component: 'justifi-proceeds-list',\n parameters: {},\n decorators: [\n (Story) => `\n ${Story()}\n <script>\n window.addEventListener('proceed-row-clicked', (e) => {\n console.log(e);\n })\n </script>\n `\n ]\n};\n\nclass ProceedsListArgs {\n 'auth-token': string;\n 'account-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| config.privateAuthToken;\n this['account-id'] = args['account-id'] \|\| ~~config.examplePlatformAccountId~~;\n }\n}\n\nconst Template = (args: ProceedsListArgs) => {\n return (`\n <justifi-proceeds-list\n data-testid=\"justifi-proceeds-list\"\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n />\n `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new ProceedsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new ProceedsListArgs({});\nStyled.decorators = [\n (Story) => `\n ${Story()}\n <style>\n justifi-proceeds-list::part(table-head-cell) {\n background-color: #F4F4F6;\n }\n justifi-proceeds-list::part(pagination-bar) {\n background-color: #F4F4F6;\n }\n justifi-proceeds-list::part(arrow) {\n --bs-btn-disabled-bg: #212529;\n --bs-btn-disabled-border-color: #212529;\n --bs-btn-bg: #212529;\n --bs-btn-border-color: #212529;\n --bs-btn-hover-bg: #fccc32;\n --bs-btn-hover-border-color: #fccc32;\n }\n justifi-proceeds-list::part(error-state) {\n color: red;\n background-color: #EEEEF5;\n }\n justifi-proceeds-list::part(loading-state-cell) {\n background-color: #EEEEF5;\n }\n justifi-proceeds-list::part(table-row) {\n background-color: #EEEEF5;\n }\n justifi-proceeds-list::part(table-row-even) {\n background-color: #F4F4F6;\n }\n </style>\n `\n]\n"]}
1	+ {"version":3,"file":"proceeds-list.stories.js","sourceRoot":"","sources":["../../../../src/components/proceeds-list/proceeds-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,6BAA6B;EACpC,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,gBAAgB;EAIpB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;IACnE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;EAChD,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAsB,EAAE,EAAE;EAC1C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n title: 'dev/Components/ProceedsList',\n component: 'justifi-proceeds-list',\n parameters: {},\n decorators: [\n (Story) => `\n ${Story()}\n <script>\n window.addEventListener('proceed-row-clicked', (e) => {\n console.log(e);\n })\n </script>\n `\n ]\n};\n\nclass ProceedsListArgs {\n 'auth-token': string;\n 'account-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| config.privateAuthToken;\n this['account-id'] = args['account-id'] \|\| '';\n }\n}\n\nconst Template = (args: ProceedsListArgs) => {\n return (`\n <justifi-proceeds-list\n data-testid=\"justifi-proceeds-list\"\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n />\n `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new ProceedsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new ProceedsListArgs({});\nStyled.decorators = [\n (Story) => `\n ${Story()}\n <style>\n justifi-proceeds-list::part(table-head-cell) {\n background-color: #F4F4F6;\n }\n justifi-proceeds-list::part(pagination-bar) {\n background-color: #F4F4F6;\n }\n justifi-proceeds-list::part(arrow) {\n --bs-btn-disabled-bg: #212529;\n --bs-btn-disabled-border-color: #212529;\n --bs-btn-bg: #212529;\n --bs-btn-border-color: #212529;\n --bs-btn-hover-bg: #fccc32;\n --bs-btn-hover-border-color: #fccc32;\n }\n justifi-proceeds-list::part(error-state) {\n color: red;\n background-color: #EEEEF5;\n }\n justifi-proceeds-list::part(loading-state-cell) {\n background-color: #EEEEF5;\n }\n justifi-proceeds-list::part(table-row) {\n background-color: #EEEEF5;\n }\n justifi-proceeds-list::part(table-row-even) {\n background-color: #F4F4F6;\n }\n </style>\n `\n]\n"]}

package/dist/collection/components/subaccount-details/subaccount-details.stories.js CHANGED Viewed

@@ -7,7 +7,7 @@ export default {
 class SubaccountDetailsArgs {
   constructor(args) {
     this['auth-token'] = args['auth-token'] || config.privateAuthToken;
-    this['account-id'] = args['account-id'] || config.examplePlatformAccountId;
+    this['account-id'] = args['account-id'] || '';
     this['subaccount-id'] = args['subaccount-id'] || 'subaccount-id';
   }
 }

package/dist/collection/components/subaccount-details/subaccount-details.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"subaccount-details.stories.js","sourceRoot":"","sources":["../../../../src/components/subaccount-details/subaccount-details.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,kCAAkC;EACzC,SAAS,EAAE,4BAA4B;EACvC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,qBAAqB;EAKzB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;IACnE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,~~MAAM~~,CAAC~~,wBAAwB,CAAC~~;~~IAC3E~~,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,eAAe,CAAC;EACnE,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAA2B,EAAE,EAAE;EAC/C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;uBACf,IAAI,CAAC,eAAe,CAAC;;GAEzC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,qBAAqB,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n title: 'dev/Components/SubaccountDetails',\n component: 'justifi-subaccount-details',\n parameters: {}\n};\n\nclass SubaccountDetailsArgs {\n 'auth-token': string;\n 'account-id': string;\n 'subaccount-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| config.privateAuthToken;\n this['account-id'] = args['account-id'] \|\| ~~config.examplePlatformAccountId~~;\n this['subaccount-id'] = args['subaccount-id'] \|\| 'subaccount-id';\n }\n}\n\nconst Template = (args: SubaccountDetailsArgs) => {\n return (`\n <justifi-subaccount-details\n data-testid=\"justifi-subaccounts-details\"\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n subaccount-id=\"${args['subaccount-id']}\"\n />\n `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new SubaccountDetailsArgs({});\n"]}
1	+ {"version":3,"file":"subaccount-details.stories.js","sourceRoot":"","sources":["../../../../src/components/subaccount-details/subaccount-details.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,kCAAkC;EACzC,SAAS,EAAE,4BAA4B;EACvC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,qBAAqB;EAKzB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;IACnE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,eAAe,CAAC;EACnE,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAA2B,EAAE,EAAE;EAC/C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;uBACf,IAAI,CAAC,eAAe,CAAC;;GAEzC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,qBAAqB,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n title: 'dev/Components/SubaccountDetails',\n component: 'justifi-subaccount-details',\n parameters: {}\n};\n\nclass SubaccountDetailsArgs {\n 'auth-token': string;\n 'account-id': string;\n 'subaccount-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| config.privateAuthToken;\n this['account-id'] = args['account-id'] \|\| '';\n this['subaccount-id'] = args['subaccount-id'] \|\| 'subaccount-id';\n }\n}\n\nconst Template = (args: SubaccountDetailsArgs) => {\n return (`\n <justifi-subaccount-details\n data-testid=\"justifi-subaccounts-details\"\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n subaccount-id=\"${args['subaccount-id']}\"\n />\n `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new SubaccountDetailsArgs({});\n"]}

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

@@ -17,7 +17,7 @@ export default {
 class SubaccountsListArgs {
   constructor(args) {
     this['auth-token'] = args['auth-token'] || config.privateAuthToken;
-    this['account-id'] = args['account-id'] || config.examplePlatformAccountId;
+    this['account-id'] = args['account-id'] || '';
   }
 }
 const Template = (args) => {

package/dist/collection/components/subaccounts-list/subaccounts-list.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"subaccounts-list.stories.js","sourceRoot":"","sources":["../../../../src/components/subaccounts-list/subaccounts-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,gCAAgC;EACvC,SAAS,EAAE,0BAA0B;EACrC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,mBAAmB;EAIvB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;IACnE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,~~MAAM~~,~~CAAC,wBAAwB,~~CAAA;~~EAC5E~~,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAyB,EAAE,EAAE;EAC7C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,mBAAmB,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,mBAAmB,CAAC,EAAE,CAAC,CAAC;AAC1C,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n title: 'dev/Components/SubaccountsList',\n component: 'justifi-subaccounts-list',\n parameters: {},\n decorators: [\n (Story) => `\n ${Story()}\n <script>\n window.addEventListener('subaccount-row-clicked', (e) => {\n console.log(e);\n })\n </script>\n `\n ]\n};\n\nclass SubaccountsListArgs {\n 'auth-token': string;\n 'account-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| config.privateAuthToken;\n this['account-id'] = args['account-id'] \|\| ~~config.examplePlatformAccountId~~\n }\n}\n\nconst Template = (args: SubaccountsListArgs) => {\n return (`\n <justifi-subaccounts-list\n data-testid=\"justifi-subaccounts-list\"\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n />\n `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new SubaccountsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new SubaccountsListArgs({});\nStyled.decorators = [\n (Story) => `\n ${Story()}\n <style>\n justifi-subaccounts-list::part(table-head-cell) {\n background-color: #F4F4F6;\n }\n justifi-subaccounts-list::part(pagination-bar) {\n background-color: #F4F4F6;\n }\n justifi-subaccounts-list::part(arrow) {\n --bs-btn-disabled-bg: #212529;\n --bs-btn-disabled-border-color: #212529;\n --bs-btn-bg: #212529;\n --bs-btn-border-color: #212529;\n --bs-btn-hover-bg: #fccc32;\n --bs-btn-hover-border-color: #fccc32;\n }\n justifi-subaccounts-list::part(error-state) {\n color: red;\n background-color: #EEEEF5;\n }\n justifi-subaccounts-list::part(loading-state-cell) {\n background-color: #EEEEF5;\n }\n justifi-subaccounts-list::part(table-row) {\n background-color: #EEEEF5;\n }\n justifi-subaccounts-list::part(table-row-even) {\n background-color: #F4F4F6;\n }\n </style>\n `\n]\n"]}
1	+ {"version":3,"file":"subaccounts-list.stories.js","sourceRoot":"","sources":["../../../../src/components/subaccounts-list/subaccounts-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,gCAAgC;EACvC,SAAS,EAAE,0BAA0B;EACrC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE;IACV,CAAC,KAAK,EAAE,EAAE,CAAC;QACP,KAAK,EAAE;;;;;;KAMV;GACF;CACF,CAAC;AAEF,MAAM,mBAAmB;EAIvB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,gBAAgB,CAAC;IACnE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;EAC/C,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAyB,EAAE,EAAE;EAC7C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,mBAAmB,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,mBAAmB,CAAC,EAAE,CAAC,CAAC;AAC1C,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n title: 'dev/Components/SubaccountsList',\n component: 'justifi-subaccounts-list',\n parameters: {},\n decorators: [\n (Story) => `\n ${Story()}\n <script>\n window.addEventListener('subaccount-row-clicked', (e) => {\n console.log(e);\n })\n </script>\n `\n ]\n};\n\nclass SubaccountsListArgs {\n 'auth-token': string;\n 'account-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| config.privateAuthToken;\n this['account-id'] = args['account-id'] \|\| ''\n }\n}\n\nconst Template = (args: SubaccountsListArgs) => {\n return (`\n <justifi-subaccounts-list\n data-testid=\"justifi-subaccounts-list\"\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n />\n `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new SubaccountsListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new SubaccountsListArgs({});\nStyled.decorators = [\n (Story) => `\n ${Story()}\n <style>\n justifi-subaccounts-list::part(table-head-cell) {\n background-color: #F4F4F6;\n }\n justifi-subaccounts-list::part(pagination-bar) {\n background-color: #F4F4F6;\n }\n justifi-subaccounts-list::part(arrow) {\n --bs-btn-disabled-bg: #212529;\n --bs-btn-disabled-border-color: #212529;\n --bs-btn-bg: #212529;\n --bs-btn-border-color: #212529;\n --bs-btn-hover-bg: #fccc32;\n --bs-btn-hover-border-color: #fccc32;\n }\n justifi-subaccounts-list::part(error-state) {\n color: red;\n background-color: #EEEEF5;\n }\n justifi-subaccounts-list::part(loading-state-cell) {\n background-color: #EEEEF5;\n }\n justifi-subaccounts-list::part(table-row) {\n background-color: #EEEEF5;\n }\n justifi-subaccounts-list::part(table-row-even) {\n background-color: #F4F4F6;\n }\n </style>\n `\n]\n"]}

package/dist/collection/components/table/table.js CHANGED Viewed

@@ -4,7 +4,7 @@ export class Table {
   constructor() {
     this.emptyState = () => {
       var _a;
-      return (h("tr", null, h("td", { class: "empty-state", part: "empty-state", colSpan: (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.length, style: { textAlign: 'center' } }, "No payments to show")));
+      return (h("tr", null, h("td", { class: "empty-state", part: "empty-state", colSpan: (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.length, style: { textAlign: 'center' } }, "No results")));
     };
     this.errorState = () => {
       var _a;