@justifi/webcomponents 4.6.4 → 4.7.0-rc.1

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

@@ -1,76 +1,39 @@
 import { Host, h } from "@stencil/core";
-import { Api } from "../../api";
-import { pagingDefaults } from "../table/table-utils";
+import { Api, pagingDefaults } from "../../api";
 import { Business } from "../../api/Business";
-import { formatDate } from "../../utils/utils";
+import { formatDate, snakeCaseToHumanReadable } from "../../utils/utils";
+import { config } from "../../../config";
 /**
-  * @exportedPart table-head: Table head
-  * @exportedPart table-head-row: Head row
-  * @exportedPart table-head-cell: Individual head cell
-  * @exportedPart table-body: Body of the table
-  * @exportedPart table-row: Row of the table
-  * @exportedPart table-cell: Individual cell of the table
-  * @exportedPart loading-state-cell: Row for loading state
-  * @exportedPart loading-state-spinner: Spinner element for loading state
-  * @exportedPart error-state: Row for Error state
-  * @exportedPart empty-state: Row for Emtpy state
-  * @exportedPart pagination-bar: Pagination bar
-  * @exportedPart arrow: Both paging buttons
-  * @exportedPart arrow-left: Previous page button
-  * @exportedPart arrow-right: Next page button
-  * @exportedPart arrow-disabled: Disabled state for paging buttons
-*/
+ * @exportedPart table-head: Table head
+ * @exportedPart table-head-row: Head row
+ * @exportedPart table-head-cell: Individual head cell
+ * @exportedPart table-body: Body of the table
+ * @exportedPart table-row: Row of the table
+ * @exportedPart table-cell: Individual cell of the table
+ * @exportedPart loading-state-cell: Row for loading state
+ * @exportedPart loading-state-spinner: Spinner element for loading state
+ * @exportedPart error-state: Row for Error state
+ * @exportedPart empty-state: Row for Emtpy state
+ * @exportedPart pagination-bar: Pagination bar
+ * @exportedPart arrow: Both paging buttons
+ * @exportedPart arrow-left: Previous page button
+ * @exportedPart arrow-right: Next page button
+ * @exportedPart arrow-disabled: Disabled state for paging buttons
+ */
 export class BusinessList {
   constructor() {
-    this.onPageChange = (direction) => {
-      return () => {
-        this.fetchData(direction);
-      };
-    };
     this.mapProductStatusToBadge = (status) => {
-      return status && 'bg-success' || 'bg-secondary';
+      return (status && 'bg-success') || 'bg-secondary';
     };
-    this.mapBusinessType = (type) => {
-      switch (type) {
-        case 'individual':
-          return 'Individual';
-        case 'non_profit':
-          return 'Non Profit';
-        case 'for_profit':
-          return 'For Profit';
-        case 'government_entity':
-          return 'Government Entity';
-      }
+    this.handleClickPrevious = (beforeCursor) => {
+      const newParams = Object.assign({}, this.params);
+      delete newParams.after_cursor;
+      this.params = (Object.assign(Object.assign({}, newParams), { before_cursor: beforeCursor }));
     };
-    this.mapBusinessStructure = (type) => {
-      switch (type) {
-        case 'sole_proprietorship':
-          return 'Sole Proprietorship';
-        case 'single_llc':
-          return 'Single LLC';
-        case 'multi_llc':
-          return 'Multi LLC';
-        case 'private_partnership':
-          return 'Private Partnership';
-        case 'private_corporation':
-          return 'Private Corporation';
-        case 'unincorporated_association':
-          return 'Unincorporated Association';
-        case 'public_partnership':
-          return 'Public Partnership';
-        case 'public_corporation':
-          return 'Public Corporation';
-        case 'incorporated':
-          return 'Incorporated';
-        case 'unincorporated':
-          return 'Unincorporated';
-        case 'government_unit':
-          return 'Government Unit';
-        case 'government_instrumentality':
-          return 'Government Instrumentality';
-        case 'tax_exempt_government_instrumentality':
-          return 'Tax Exempt Government Instrumentality';
-      }
+    this.handleClickNext = (afterCursor) => {
+      const newParams = Object.assign({}, this.params);
+      delete newParams.before_cursor;
+      this.params = (Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor }));
     };
     this.accountId = undefined;
     this.authToken = undefined;
@@ -78,6 +41,7 @@ export class BusinessList {
     this.loading = true;
     this.errorMessage = undefined;
     this.paging = pagingDefaults;
+    this.params = undefined;
   }
   updateOnPropChange() {
     this.fetchData();
@@ -85,27 +49,29 @@ export class BusinessList {
   connectedCallback() {
     this.fetchData();
   }
-  async fetchData(direction) {
+  async fetchData() {
     var _a;
     if (!this.accountId || !this.authToken) {
-      this.errorMessage = "Can not fetch any data without an AccountID and an AuthToken";
+      this.errorMessage =
+        'Can not fetch any data without an AccountID and an AuthToken';
       this.loading = false;
       return;
     }
     this.loading = true;
     const endpoint = `entities/business`;
-    const response = await Api(this.authToken, process.env.ENTITIES_API_ORIGIN).get(endpoint, {
-      account_id: this.accountId,
-      paging: this.paging,
-      direction: direction
-    });
+    let accountIDParam = { account_id: this.accountId };
+    const response = await Api(this.authToken, config.proxyApiOrigin)
+      .get(endpoint, Object.assign(Object.assign({}, accountIDParam), this.params));
     if (!response.error) {
       this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
       const data = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.map(dataItem => new Business(dataItem));
       this.businesses = data;
     }
     else {
-      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+      this.errorMessage =
+        typeof response.error === 'string'
+          ? response.error
+          : response.error.message;
     }
     this.loading = false;
   }
@@ -116,12 +82,15 @@ export class BusinessList {
         ['Business Structure', 'The business structure'],
         ['Tax ID', 'The tax ID associated with this business'],
         ['Industry', 'The industry this business participates in'],
-        ['Product Ready', 'List of our products that are used by this business'],
+        [
+          'Product Ready',
+          'List of our products that are used by this business',
+        ],
         ['Created at', 'Date this business was created'],
-      ], rowData: this.businesses.map((business) => ([
+      ], rowData: this.businesses.map((business) => [
         business.legal_name,
-        this.mapBusinessType(business.business_type),
-        this.mapBusinessStructure(business.business_structure),
+        snakeCaseToHumanReadable(business.business_type),
+        snakeCaseToHumanReadable(business.business_structure),
         business.tax_id,
         business.industry,
         {
@@ -133,10 +102,10 @@ export class BusinessList {
                       <span class="badge ${this.mapProductStatusToBadge(business.product_categories.lending)}">Lending</span>
                       <span class="badge ${this.mapProductStatusToBadge(business.product_categories.payment)}">Payment</span>
                     </div>
-                  `
+                  `,
         },
         formatDate(business.created_at),
-      ])), loading: this.loading, "error-message": this.errorMessage, paging: Object.assign(Object.assign({}, this.paging), { onPrev: this.onPageChange('prev'), onNext: this.onPageChange('next') }) })));
+      ]), loading: this.loading, "error-message": this.errorMessage, params: this.params, paging: Object.assign(Object.assign({}, this.paging), { handleClickNext: this.handleClickNext, handleClickPrevious: this.handleClickPrevious }) })));
   }
   static get is() { return "justifi-business-list"; }
   static get encapsulation() { return "shadow"; }
@@ -163,8 +132,17 @@ export class BusinessList {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "required",
+              "text": undefined
+            }, {
+              "name": "type",
+              "text": "{string}"
+            }, {
+              "name": "memberof",
+              "text": "PaymentsList"
+            }],
+          "text": "The Account ID to fetch payments.\nThis is required to fetch any data."
         },
         "attribute": "account-id",
         "reflect": false
@@ -180,8 +158,14 @@ export class BusinessList {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "required",
+              "text": undefined
+            }, {
+              "name": "type",
+              "text": "{string}"
+            }],
+          "text": "The Auth Token to fetch payments.\nThis is required to fetch any data."
         },
         "attribute": "auth-token",
         "reflect": false
@@ -193,7 +177,8 @@ export class BusinessList {
       "businesses": {},
       "loading": {},
       "errorMessage": {},
-      "paging": {}
+      "paging": {},
+      "params": {}
     };
   }
   static get watchers() {
@@ -203,6 +188,9 @@ export class BusinessList {
       }, {
         "propName": "authToken",
         "methodName": "updateOnPropChange"
+      }, {
+        "propName": "params",
+        "methodName": "updateOnPropChange"
       }];
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"business-list.js","sourceRoot":"","sources":["../../../../src/components/business-list/business-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection } from '../../api';\nimport { PagingInfo, pagingDefaults } from '../table/table-utils';\nimport { Business } from '../../api/Business';\nimport { formatDate } from '../../utils/utils';\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 arrow-disabled: Disabled state for paging buttons\n*/\n@Component({\n  tag: 'justifi-business-list',\n  styleUrl: 'business-list.scss',\n  shadow: true,\n})\n\nexport class BusinessList {\n  @Prop() accountId: string;\n  @Prop() authToken: string;\n  @State() businesses: Business[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n\n  @Watch('accountId')\n  @Watch('authToken')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  onPageChange = (direction: string) => {\n    return () => {\n      this.fetchData(direction);\n    }\n  }\n\n  mapProductStatusToBadge = (status: boolean) => {\n    return status && 'bg-success' || 'bg-secondary';\n  }\n\n  mapBusinessType = (type: string) => {\n    switch (type) {\n      case 'individual':\n        return 'Individual'\n      case 'non_profit':\n        return 'Non Profit'\n      case 'for_profit':\n        return 'For Profit'\n      case 'government_entity':\n        return 'Government Entity'\n    }\n  }\n\n  mapBusinessStructure = (type: string) => {\n    switch (type) {\n      case 'sole_proprietorship':\n        return 'Sole Proprietorship'\n      case 'single_llc':\n        return 'Single LLC'\n      case 'multi_llc':\n        return 'Multi LLC'\n      case 'private_partnership':\n        return 'Private Partnership'\n      case 'private_corporation':\n        return 'Private Corporation'\n      case 'unincorporated_association':\n        return 'Unincorporated Association'\n      case 'public_partnership':\n        return 'Public Partnership'\n      case 'public_corporation':\n        return 'Public Corporation'\n      case 'incorporated':\n        return 'Incorporated'\n      case 'unincorporated':\n        return 'Unincorporated'\n      case 'government_unit':\n        return 'Government Unit'\n      case 'government_instrumentality':\n        return 'Government Instrumentality'\n      case 'tax_exempt_government_instrumentality':\n        return 'Tax Exempt Government Instrumentality'\n    }\n  }\n\n  async fetchData(direction?: string): 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    this.loading = true;\n    const endpoint = `entities/business`;\n\n    const response: IApiResponseCollection<Business[]> = await Api(this.authToken, process.env.ENTITIES_API_ORIGIN).get(endpoint, {\n      account_id: this.accountId,\n      paging: this.paging,\n      direction: direction\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 Business(dataItem));\n      this.businesses = 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        <justifi-table\n          columnData={[\n            ['Legal Name', 'The name associated with this Business'],\n            ['Business Type', 'The business type'],\n            ['Business Structure', 'The business structure'],\n            ['Tax ID', 'The tax ID associated with this business'],\n            ['Industry', 'The industry this business participates in'],\n            ['Product Ready', 'List of our products that are used by this business'],\n            ['Created at', 'Date this business was created'],\n          ]}\n          rowData={\n            this.businesses.map((business) => (\n              [\n                business.legal_name,\n                this.mapBusinessType(business.business_type),\n                this.mapBusinessStructure(business.business_structure),\n                business.tax_id,\n                business.industry,\n                {\n                  type: 'inner',\n                  value: `\n                    <div class=\"d-flex flex-nowrap gap-1\">\n                      <span class=\"badge ${this.mapProductStatusToBadge(business.product_categories.credit)}\">Credit</span>\n                      <span class=\"badge ${this.mapProductStatusToBadge(business.product_categories.insurance)}\">Insurance</span>\n                      <span class=\"badge ${this.mapProductStatusToBadge(business.product_categories.lending)}\">Lending</span>\n                      <span class=\"badge ${this.mapProductStatusToBadge(business.product_categories.payment)}\">Payment</span>\n                    </div>\n                  `\n                },\n                formatDate(business.created_at),\n              ]\n            ))\n          }\n          loading={this.loading}\n          error-message={this.errorMessage}\n          paging={{\n            ...this.paging,\n            onPrev: this.onPageChange('prev'),\n            onNext: this.onPageChange('next')\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"business-list.js","sourceRoot":"","sources":["../../../../src/components/business-list/business-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection, PagingInfo, pagingDefaults } from '../../api';\nimport { Business, IBusiness } from '../../api/Business';\nimport { formatDate, snakeCaseToHumanReadable } from '../../utils/utils';\nimport { config } from '../../../config';\n\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 arrow-disabled: Disabled state for paging buttons\n */\n@Component({\n  tag: 'justifi-business-list',\n  styleUrl: 'business-list.scss',\n  shadow: true,\n})\nexport class BusinessList {\n  /**\n   * The Account ID to fetch payments.\n   * This is required to fetch any data.\n   * @required\n   * @type {string}\n   * @memberof PaymentsList\n   */\n  @Prop() accountId: string;\n  /**\n   * The Auth Token to fetch payments.\n   * This is required to fetch any data.\n   * @required\n   * @type {string}\n   */\n  @Prop() authToken: string;\n  @State() businesses: Business[] = [];\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n  @State() paging: PagingInfo = pagingDefaults;\n  @State() params: any\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  mapProductStatusToBadge = (status: boolean) => {\n    return (status && 'bg-success') || 'bg-secondary';\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 =\n        'Can not fetch any data without an AccountID and an AuthToken';\n      this.loading = false;\n      return;\n    }\n    this.loading = true;\n    const endpoint = `entities/business`;\n    let accountIDParam = { account_id: this.accountId };\n\n    const response: IApiResponseCollection<Business[]> = await Api(this.authToken, config.proxyApiOrigin,)\n      .get(endpoint, { ...accountIDParam, ...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 Business(dataItem));\n      this.businesses = data;\n    } else {\n      this.errorMessage =\n        typeof response.error === 'string'\n          ? response.error\n          : response.error.message;\n    }\n\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <justifi-table\n          columnData={[\n            ['Legal Name', 'The name associated with this Business'],\n            ['Business Type', 'The business type'],\n            ['Business Structure', 'The business structure'],\n            ['Tax ID', 'The tax ID associated with this business'],\n            ['Industry', 'The industry this business participates in'],\n            [\n              'Product Ready',\n              'List of our products that are used by this business',\n            ],\n            ['Created at', 'Date this business was created'],\n          ]}\n          rowData={this.businesses.map((business: IBusiness) => [\n            business.legal_name,\n            snakeCaseToHumanReadable(business.business_type),\n            snakeCaseToHumanReadable(business.business_structure),\n            business.tax_id,\n            business.industry,\n            {\n              type: 'inner',\n              value: `\n                    <div class=\"d-flex flex-nowrap gap-1\">\n                      <span class=\"badge ${this.mapProductStatusToBadge(\n                business.product_categories.credit,\n              )}\">Credit</span>\n                      <span class=\"badge ${this.mapProductStatusToBadge(\n                business.product_categories.insurance,\n              )}\">Insurance</span>\n                      <span class=\"badge ${this.mapProductStatusToBadge(\n                business.product_categories.lending,\n              )}\">Lending</span>\n                      <span class=\"badge ${this.mapProductStatusToBadge(\n                business.product_categories.payment,\n              )}\">Payment</span>\n                    </div>\n                  `,\n            },\n            formatDate(business.created_at),\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/business-list/business-list.stories.js

@@ -1,3 +1,4 @@
+import { config } from "../../../config";
 export default {
   title: 'dev/Components/BusinessList',
   component: 'justifi-business-list',
@@ -5,8 +6,8 @@ export default {
 };
 class BusinessListArgs {
   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.exampleBusinessAccountId;
   }
 }
 const Template = (args) => {

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

@@ -1 +1 @@
-{"version":3,"file":"business-list.stories.js","sourceRoot":"","sources":["../../../../src/components/business-list/business-list.stories.ts"],"names":[],"mappings":"AAAA,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,EAAE,CAAC;IAC9C,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;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":["export 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'] || '';\n    this['account-id'] = args['account-id'] || '';\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"]}
+{"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"]}

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

@@ -1,15 +1,8 @@
-const isDev = process.env.NODE_ENV === 'development';
+import { config } from "../../../config";
 export default {
   title: 'Components/CardForm',
   component: 'justifi-card-form',
   argTypes: {
-    'iframe-origin': {
-      control: 'text',
-      table: {
-        disable: isDev ? false : true,
-        category: 'props',
-      },
-    },
     'resize': {
       description: 'Deprecated: This method will be removed in future releases.',
       table: {
@@ -86,7 +79,7 @@ const Template = (args) => {
       <justifi-card-form
         data-testid="card-form-iframe"
         validation-mode='${args['validation-mode'] || 'onSubmit'}'
-        iframe-origin='${args['iframe-origin'] || ''}'
+        iframe-origin='${config.iframeOrigin}'
         single-line='${args['single-line']}'
       />
     </div>

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

@@ -1 +1 @@
-{"version":3,"file":"card-form.stories.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.stories.ts"],"names":[],"mappings":"AAOA,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC;AAErD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,SAAS,EAAE,mBAAmB;EAC9B,QAAQ,EAAE;IACR,eAAe,EAAE;MACf,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;QAC7B,QAAQ,EAAE,OAAO;OAClB;KACF;IACD,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;CACF,CAAC;AAEF,MAAM,mBAAmB,GAAG,KAAK,EAAE,QAAoC,EAAE,EAAE;EACzE,MAAM,KAAK,GAAG,MAAM,QAAQ,CAAC,QAAQ,EAAE,CAAC;EACxC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AACrB,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,KAAK,EAAE,QAAoC,EAAE,iBAAiB,EAAE,EAAE;EAC5F,MAAM,gBAAgB,GAAG,MAAM,QAAQ,CAAC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;EACjF,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAChC,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,KAAK,EAAE,QAAoC,EAAE,EAAE;EACvE,MAAM,QAAQ,CAAC,MAAM,EAAE,CAAC;AAC1B,CAAC,CAAC;AACF,MAAM,WAAW,GAAG,GAAG,EAAE;EACvB,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;EAClC,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAA+B,CAAC;EAC3F,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC5D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC5D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EACxD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1C,mBAAmB,CAAC,QAAQ,CAAC,CAAC;EAChC,CAAC,CAAC,CAAC;EACH,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1C,mBAAmB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;EACpC,CAAC,CAAC,CAAC;EACH,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IACxC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;EAC9B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;EACrB,gBAAgB,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AACjD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;SAiBX,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAuB,EAAE,EAAE;EAC3C,MAAM,cAAc,GAAG,IAAI,CAAC;EAE5B,OAAO;;;;UAIC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;;;;;2BAKV,IAAI,CAAC,iBAAiB,CAAC,IAAI,UAAU;yBACvC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;uBAC7B,IAAI,CAAC,aAAa,CAAC;;;MAGpC,cAAc,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;GACpC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;EACX,iBAAiB,EAAE,UAAU;EAC7B,aAAa,EAAE,KAAK;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;EAChB,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCvB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,aAAa,EAAE,KAAK;EACpB,eAAe,EAAE,eAAe;CACjC,CAAC","sourcesContent":["interface CardFormStoryArgs {\n  'iframe-origin': string;\n  'single-line': boolean;\n  'validation-mode': string;\n  'css-variables': string;\n}\n\nconst isDev = process.env.NODE_ENV === 'development';\n\nexport default {\n  title: 'Components/CardForm',\n  component: 'justifi-card-form',\n  argTypes: {\n    'iframe-origin': {\n      control: 'text',\n      table: {\n        disable: isDev ? false : true,\n        category: 'props',\n      },\n    },\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='${args['iframe-origin'] || ''}'\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"]}
+{"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  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"]}

package/dist/collection/components/details/details.js

@@ -3,16 +3,12 @@ import { ErrorState } from "./utils";
 export class Details {
   constructor() {
     this.errorMessage = undefined;
-    this.entity = undefined;
   }
   render() {
-    var _a, _b;
-    return (h(Host, { exportParts: 'detail-loading-spinner,detail-loading-state,detail-empty-state,\n        detail-head,detail-title,detail-head-info,detail-head-info-item,\n        detail-head-info-item-title,detail-head-info-item-data,detail-metadata,detail-metadata-title,\n        detail-section,detail-section-title,detail-section-item-title,detail-section-item-data' }, this.errorMessage ?
+    return (h(Host, { exportParts: 'detail-empty-state, detail-metadata-title, detail-metadata, detail-section, detail-section-title, \n        detail-section-item-title, detail-section-item-data, detail-head, detail-title, detail-head-info' }, this.errorMessage ?
       ErrorState(this.errorMessage)
       :
-        h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }), ((_a = this.entity) === null || _a === void 0 ? void 0 : _a.metadata) && Object.keys((_b = this.entity) === null || _b === void 0 ? void 0 : _b.metadata).length ?
-          h("div", { class: "mt-4" }, h("h2", { part: "detail-metadata-title", class: "fs-3" }, "Metadata"), h("hr", null), h("pre", { part: "detail-metadata", class: "p-2", "aria-label": "metadata content" }, h("code", null, JSON.stringify(this.entity.metadata, null, 2))))
-          : null)));
+        h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));
   }
   static get is() { return "justifi-details"; }
   static get encapsulation() { return "shadow"; }
@@ -44,21 +40,6 @@ export class Details {
         },
         "attribute": "error-message",
         "reflect": false
-      },
-      "entity": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "{ metadata: any }",
-          "resolved": "{ metadata: any; }",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
       }
     };
   }

package/dist/collection/components/details/details.js.map

@@ -1 +1 @@
-{"version":3,"file":"details.js","sourceRoot":"","sources":["../../../../src/components/details/details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAQrC,MAAM,OAAO,OAAO;;;;;EAIlB,MAAM;;IACJ,OAAO,CACL,EAAC,IAAI,IACH,WAAW,EAAC,kVAG2E,IAGrF,IAAI,CAAC,YAAY,CAAC,CAAC;MACjB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;MAC7B,CAAC;QACD,YAAM,KAAK,EAAC,KAAK;UACf,YAAM,IAAI,EAAC,WAAW,GAAG;UACzB,YAAM,IAAI,EAAC,iBAAiB,GAAG;UAC9B,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,KAAI,MAAM,CAAC,IAAI,CAAC,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;YACnE,WAAK,KAAK,EAAC,MAAM;cACf,UAAI,IAAI,EAAC,uBAAuB,EAAC,KAAK,EAAC,MAAM,eAAc;cAC3D,aAAM;cACN,WAAK,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,KAAK,gBAAY,kBAAkB;gBACnE,gBACG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CACzC,CACH,CACF;YACN,CAAC,CAAC,IAAI,CAEH,CAEN,CACR,CAAA;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { ErrorState } from './utils';\n\n@Component({\n  tag: 'justifi-details',\n  styleUrl: './details.scss',\n  shadow: true,\n})\n\nexport class Details {\n  @Prop() errorMessage: string;\n  @Prop() entity: { metadata: any };\n\n  render() {\n    return (\n      <Host\n        exportParts='detail-loading-spinner,detail-loading-state,detail-empty-state,\n        detail-head,detail-title,detail-head-info,detail-head-info-item,\n        detail-head-info-item-title,detail-head-info-item-data,detail-metadata,detail-metadata-title,\n        detail-section,detail-section-title,detail-section-item-title,detail-section-item-data'\n      >\n        {\n          this.errorMessage ?\n            ErrorState(this.errorMessage)\n            :\n            <main class=\"p-2\">\n              <slot name=\"head-info\" />\n              <slot name='detail-sections' />\n              {this.entity?.metadata && Object.keys(this.entity?.metadata).length ?\n                <div class=\"mt-4\">\n                  <h2 part=\"detail-metadata-title\" class=\"fs-3\">Metadata</h2>\n                  <hr />\n                  <pre part=\"detail-metadata\" class=\"p-2\" aria-label=\"metadata content\">\n                    <code>\n                      {JSON.stringify(this.entity.metadata, null, 2)}\n                    </code>\n                  </pre>\n                </div>\n                : null\n              }\n            </main>\n        }\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"details.js","sourceRoot":"","sources":["../../../../src/components/details/details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAQrC,MAAM,OAAO,OAAO;;;;EAGlB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,WAAW,EAAC,8MACqF,IAG/F,IAAI,CAAC,YAAY,CAAC,CAAC;MACjB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;MAC7B,CAAC;QACD,YAAM,KAAK,EAAC,KAAK;UACf,YAAM,IAAI,EAAC,WAAW,GAAG;UACzB,YAAM,IAAI,EAAC,iBAAiB,GAAG,CAC1B,CAEN,CACR,CAAA;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { ErrorState } from './utils';\n\n@Component({\n  tag: 'justifi-details',\n  styleUrl: './details.scss',\n  shadow: true,\n})\n\nexport class Details {\n  @Prop() errorMessage: string;\n\n  render() {\n    return (\n      <Host\n        exportParts='detail-empty-state, detail-metadata-title, detail-metadata, detail-section, detail-section-title, \n        detail-section-item-title, detail-section-item-data, detail-head, detail-title, detail-head-info'\n      >\n        {\n          this.errorMessage ?\n            ErrorState(this.errorMessage)\n            :\n            <main class=\"p-2\">\n              <slot name=\"head-info\" />\n              <slot name='detail-sections' />\n            </main>\n        }\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/details/utils.js

@@ -1,10 +1,9 @@
 import { h } from "@stencil/core";
-export const LoadingState = h("main", { part: 'detail-loading-state', class: "p-2 d-flex justify-content-center" }, h("div", { part: 'detail-loading-spinner', class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")));
-export const ErrorState = (errorMessage) => h("main", { part: 'detail-empty-state', class: "p-2 d-flex justify-content-center" }, h("div", null, errorMessage));
-export const DetailSection = ({ sectionTitle }, children) => h("div", { part: "detail-section", class: "p-2 mt-4" }, h("h5", { part: "detail-section-title" }, sectionTitle), h("hr", null), h("div", { class: "d-flex flex-column justify-content-center gap-2 text-nowrap" }, children));
-export const DetailItem = ({ title, value }) => (title && value) ?
-  h("div", { class: "d-flex gap-2" }, h("span", { part: "detail-section-item-title", class: "fw-bold col-3" }, title), h("span", { part: "detail-section-item-data", innerHTML: value }))
-  : null;
-export const EntityHeadInfoItem = ({ title, value, classes }) => h("div", { part: "detail-head-info-item", class: `d-flex flex-column ${classes}` }, h("span", { part: "detail-head-info-item-title", class: "fw-bold border-1 border-bottom ps-2 pe-2" }, title), h("span", { part: "detail-head-info-item-data", class: "pt-2 ps-2 pe-2" }, value));
-export const EntityHeadInfo = ({ title, slot, badge }, children) => h("div", { slot: slot, part: 'detail-head', class: "p-2" }, h("div", { class: "d-flex flex-row align-items-center gap-2 mb-2" }, h("h1", { class: "m-0", part: 'detail-title' }, title), badge), h("div", { part: "detail-head-info", class: "d-flex flex-row align-items-top" }, children));
+export const LoadingState = (h("main", { part: "detail-loading-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("div", { part: "detail-loading-spinner", class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading..."))));
+export const ErrorState = (errorMessage) => (h("main", { part: "detail-empty-state", class: "p-4 d-flex justify-content-center text-center", style: { fontSize: '1.2rem' } }, h("div", null, errorMessage)));
+export const DetailSection = ({ sectionTitle }, children) => (h("div", { part: "detail-section", class: "mt-4" }, h("h5", { part: "detail-section-title" }, sectionTitle), h("hr", null), h("div", { class: "d-flex flex-column justify-content-center gap-2 text-nowrap" }, children)));
+export const DetailItem = ({ title, value, }) => title && value ? (h("div", { class: "d-flex gap-2" }, h("span", { part: "detail-section-item-title", class: "fw-bold flex-1" }, title), h("span", { part: "detail-section-item-data", class: "flex-1", innerHTML: value }))) : null;
+export const EntityHeadInfoItem = ({ title, value, classes, }) => (h("div", { part: "detail-head-info-item", class: `d-flex flex-column ${classes}` }, h("span", { part: "detail-head-info-item-title", class: "fw-bold border-1 border-bottom ps-2 pe-2" }, title), h("span", { part: "detail-head-info-item-data", class: "pt-2 ps-2 pe-2" }, value)));
+export const EntityHeadInfo = ({ title, slot, badge }, children) => (h("div", { slot: slot, part: "detail-head", class: "p-2" }, h("div", { class: "d-flex flex-row align-items-center gap-2 mb-2" }, h("h1", { class: "m-0", part: "detail-title" }, title), badge), h("div", { part: "detail-head-info", class: "d-flex flex-row align-items-top" }, children)));
+export const CodeBlock = ({ metadata }) => metadata && Object.keys(metadata).length ? (h("div", { class: 'mt-4' }, h("pre", { part: "detail-metadata", class: "p-2", "aria-label": "metadata content" }, h("code", null, JSON.stringify(metadata, null, 2))))) : null;
 //# sourceMappingURL=utils.js.map

package/dist/collection/components/details/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/details/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,MAAM,CAAC,MAAM,YAAY,GACvB,YAAM,IAAI,EAAC,sBAAsB,EAAC,KAAK,EAAC,mCAAmC;EACzE,WAAK,IAAI,EAAC,wBAAwB,EAAC,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,QAAQ;IACvF,YAAM,KAAK,EAAC,iBAAiB,iBAAkB,CAC3C,CACD,CAAA;AAET,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,YAAoB,EAAE,EAAE,CACjD,YAAM,IAAI,EAAC,oBAAoB,EAAC,KAAK,EAAC,mCAAmC;EACvE,eAAM,YAAY,CAAO,CACpB,CAAA;AAET,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,YAAY,EAA4B,EAAE,QAAQ,EAAE,EAAE,CACpF,WAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,UAAU;EACzC,UAAI,IAAI,EAAC,sBAAsB,IAAE,YAAY,CAAM;EACnD,aAAK;EACL,WAAK,KAAK,EAAC,6DAA6D,IACrE,QAAQ,CACL,CACF,CAAA;AAER,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAoC,EAAE,EAAE,CAC/E,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC;EAChB,WAAK,KAAK,EAAC,cAAc;IACvB,YAAM,IAAI,EAAC,2BAA2B,EAAC,KAAK,EAAC,eAAe,IAAE,KAAK,CAAQ;IAC3E,YAAM,IAAI,EAAC,0BAA0B,EAAC,SAAS,EAAE,KAAK,GAAS,CAC3D;EACR,CAAC,CAAC,IAAI,CAAA;AAGR,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAgD,EAAE,EAAE,CAC3G,WAAK,IAAI,EAAC,uBAAuB,EAAC,KAAK,EAAE,sBAAsB,OAAO,EAAE;EACtE,YAAM,IAAI,EAAC,6BAA6B,EAAC,KAAK,EAAC,0CAA0C,IAAE,KAAK,CAAQ;EACxG,YAAM,IAAI,EAAC,4BAA4B,EAAC,KAAK,EAAC,gBAAgB,IAAE,KAAK,CAAQ,CACzE,CAAA;AAER,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAE,EAAE,CAC/D,WAAK,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,KAAK;EAC7C,WAAK,KAAK,EAAC,+CAA+C;IACxD,UAAI,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,cAAc,IAAE,KAAK,CAAM;IAC/C,KAAK,CACF;EACN,WAAK,IAAI,EAAC,kBAAkB,EAAC,KAAK,EAAC,iCAAiC,IACjE,QAAQ,CACL,CACF,CAAA","sourcesContent":["import { h } from \"@stencil/core\";\n\nexport const LoadingState =\n  <main part='detail-loading-state' class=\"p-2 d-flex justify-content-center\">\n    <div part='detail-loading-spinner' class=\"spinner-border spinner-border-sm\" role=\"status\">\n      <span class=\"visually-hidden\">Loading...</span>\n    </div>\n  </main>\n\nexport const ErrorState = (errorMessage: string) =>\n  <main part='detail-empty-state' class=\"p-2 d-flex justify-content-center\">\n    <div>{errorMessage}</div>\n  </main>\n\nexport const DetailSection = ({ sectionTitle }: { sectionTitle: string }, children) =>\n  <div part=\"detail-section\" class=\"p-2 mt-4\">\n    <h5 part=\"detail-section-title\">{sectionTitle}</h5>\n    <hr/>\n    <div class=\"d-flex flex-column justify-content-center gap-2 text-nowrap\">\n      {children}\n    </div>\n  </div>\n\nexport const DetailItem = ({ title, value }: { title: string, value: string }) =>\n  (title && value) ?\n    <div class=\"d-flex gap-2\">\n      <span part=\"detail-section-item-title\" class=\"fw-bold col-3\">{title}</span>\n      <span part=\"detail-section-item-data\" innerHTML={value}></span>\n    </div>\n  : null\n\n\nexport const EntityHeadInfoItem = ({title, value, classes}: {title: string, value: any, classes?: string}) =>\n  <div part=\"detail-head-info-item\" class={`d-flex flex-column ${classes}`}>\n    <span part=\"detail-head-info-item-title\" class=\"fw-bold border-1 border-bottom ps-2 pe-2\">{title}</span>\n    <span part=\"detail-head-info-item-data\" class=\"pt-2 ps-2 pe-2\">{value}</span>\n  </div>\n\nexport const EntityHeadInfo = ({title, slot, badge}, children) =>\n  <div slot={slot} part='detail-head' class=\"p-2\">\n    <div class=\"d-flex flex-row align-items-center gap-2 mb-2\">\n      <h1 class=\"m-0\" part='detail-title'>{title}</h1>\n      {badge}\n    </div>\n    <div part=\"detail-head-info\" class=\"d-flex flex-row align-items-top\">\n      {children}\n    </div>\n  </div>\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/details/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,YACE,IAAI,EAAC,sBAAsB,EAC3B,KAAK,EAAC,+CAA+C,EACrD,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;EAE7B,WACE,IAAI,EAAC,wBAAwB,EAC7B,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAC,QAAQ;IAEb,YAAM,KAAK,EAAC,iBAAiB,iBAAkB,CAC3C,CACD,CACR,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,YAAoB,EAAE,EAAE,CAAC,CAClD,YACE,IAAI,EAAC,oBAAoB,EACzB,KAAK,EAAC,+CAA+C,EACrD,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;EAE7B,eAAM,YAAY,CAAO,CACpB,CACR,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,EAAE,YAAY,EAA4B,EAC1C,QAAQ,EACR,EAAE,CAAC,CACH,WAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,MAAM;EACrC,UAAI,IAAI,EAAC,sBAAsB,IAAE,YAAY,CAAM;EACnD,aAAM;EACN,WAAK,KAAK,EAAC,6DAA6D,IACrE,QAAQ,CACL,CACF,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,KAAK,GAIN,EAAE,EAAE,CACH,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,CACf,WAAK,KAAK,EAAC,cAAc;EACvB,YAAM,IAAI,EAAC,2BAA2B,EAAC,KAAK,EAAC,gBAAgB,IAC1D,KAAK,CACD;EACP,YACE,IAAI,EAAC,0BAA0B,EAC/B,KAAK,EAAC,QAAQ,EACd,SAAS,EAAE,KAAK,GACV,CACJ,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AAEX,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,KAAK,EACL,KAAK,EACL,OAAO,GAKR,EAAE,EAAE,CAAC,CACJ,WAAK,IAAI,EAAC,uBAAuB,EAAC,KAAK,EAAE,sBAAsB,OAAO,EAAE;EACtE,YACE,IAAI,EAAC,6BAA6B,EAClC,KAAK,EAAC,0CAA0C,IAE/C,KAAK,CACD;EACP,YAAM,IAAI,EAAC,4BAA4B,EAAC,KAAK,EAAC,gBAAgB,IAC3D,KAAK,CACD,CACH,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,CAAC,CAClE,WAAK,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,KAAK;EAC7C,WAAK,KAAK,EAAC,+CAA+C;IACxD,UAAI,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,cAAc,IAChC,KAAK,CACH;IACJ,KAAK,CACF;EACN,WAAK,IAAI,EAAC,kBAAkB,EAAC,KAAK,EAAC,iCAAiC,IACjE,QAAQ,CACL,CACF,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAkB,EAAE,EAAE,CACxD,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CACzC,WAAK,KAAK,EAAC,MAAM;EACf,WAAK,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,KAAK,gBAAY,kBAAkB;IACnE,gBACG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAC7B,CACH,CACF,CACP,CAAC,CAAC,CAAC,IAAI,CAAC","sourcesContent":["import { h } from '@stencil/core';\n\nexport const LoadingState = (\n  <main\n    part=\"detail-loading-state\"\n    class=\"p-4 d-flex justify-content-center text-center\"\n    style={{ fontSize: '1.2rem' }}\n  >\n    <div\n      part=\"detail-loading-spinner\"\n      class=\"spinner-border spinner-border-sm\"\n      role=\"status\"\n    >\n      <span class=\"visually-hidden\">Loading...</span>\n    </div>\n  </main>\n);\n\nexport const ErrorState = (errorMessage: string) => (\n  <main\n    part=\"detail-empty-state\"\n    class=\"p-4 d-flex justify-content-center text-center\"\n    style={{ fontSize: '1.2rem' }}\n  >\n    <div>{errorMessage}</div>\n  </main>\n);\n\nexport const DetailSection = (\n  { sectionTitle }: { sectionTitle: string },\n  children,\n) => (\n  <div part=\"detail-section\" class=\"mt-4\">\n    <h5 part=\"detail-section-title\">{sectionTitle}</h5>\n    <hr />\n    <div class=\"d-flex flex-column justify-content-center gap-2 text-nowrap\">\n      {children}\n    </div>\n  </div>\n);\n\nexport const DetailItem = ({\n  title,\n  value,\n}: {\n  title: string;\n  value: string;\n}) =>\n  title && value ? (\n    <div class=\"d-flex gap-2\">\n      <span part=\"detail-section-item-title\" class=\"fw-bold flex-1\">\n        {title}\n      </span>\n      <span\n        part=\"detail-section-item-data\"\n        class=\"flex-1\"\n        innerHTML={value}\n      ></span>\n    </div>\n  ) : null;\n\nexport const EntityHeadInfoItem = ({\n  title,\n  value,\n  classes,\n}: {\n  title: string;\n  value: any;\n  classes?: string;\n}) => (\n  <div part=\"detail-head-info-item\" class={`d-flex flex-column ${classes}`}>\n    <span\n      part=\"detail-head-info-item-title\"\n      class=\"fw-bold border-1 border-bottom ps-2 pe-2\"\n    >\n      {title}\n    </span>\n    <span part=\"detail-head-info-item-data\" class=\"pt-2 ps-2 pe-2\">\n      {value}\n    </span>\n  </div>\n);\n\nexport const EntityHeadInfo = ({ title, slot, badge }, children) => (\n  <div slot={slot} part=\"detail-head\" class=\"p-2\">\n    <div class=\"d-flex flex-row align-items-center gap-2 mb-2\">\n      <h1 class=\"m-0\" part=\"detail-title\">\n        {title}\n      </h1>\n      {badge}\n    </div>\n    <div part=\"detail-head-info\" class=\"d-flex flex-row align-items-top\">\n      {children}\n    </div>\n  </div>\n);\n\nexport const CodeBlock = ({ metadata }: {metadata: {}}) => \n  metadata && Object.keys(metadata).length ? (\n    <div class='mt-4'>\n      <pre part=\"detail-metadata\" class=\"p-2\" aria-label=\"metadata content\">\n        <code>\n          {JSON.stringify(metadata, null, 2)}\n        </code>\n      </pre>\n    </div>\n  ) : null;\n"]}

package/dist/collection/components/form/form-control-number-masked.js

@@ -34,7 +34,7 @@ export class NumberInputMasked {
     (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   updateInput(newValue) {
-    if (this.imask) {
+    if (this.imask && newValue) {
       this.imask.value = String(newValue);
     }
   }

package/dist/collection/components/form/form-control-number-masked.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-control-number-masked.js","sourceRoot":"","sources":["../../../../src/components/form/form-control-number-masked.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,MAAM,OAAO,iBAAiB;;IASpB,UAAK,GAA0B,IAAI,CAAC;;;;;;;;;EAQ5C,wBAAwB,CAAC,QAAgB;IACvC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;EAC7B,CAAC;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE;MAC/B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;QACjC,IAAI,EAAE,IAAI,CAAC,IAAI;OAChB,CAAC,CAAC;MAEH,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE;QAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;QAC1C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;MACzC,CAAC,CAAC,CAAC;MAEH,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;QAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;MAC9B,CAAC,CAAC,CAAC;MAEH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACrC;EACH,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,EAAE,CAAC;EACxB,CAAC;EAED,WAAW,CAAC,QAAa;IACvB,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;KACrC;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,WAAW,EAAC,2BAA2B;MAC3C,aAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,IACtD,IAAI,CAAC,KAAK,CACL;MACR,aACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAsB,CAAC,EACpD,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EACzC,IAAI,EAAE,SAAS,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,cAAc,EAC9D,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB;MACD,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAO,CAC1D,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n} from '@stencil/core';\nimport IMask, { InputMask } from 'imask';\n\n@Component({\n  tag: 'form-control-number-masked',\n  styleUrl: 'form-control-number.scss',\n  shadow: true,\n})\nexport class NumberInputMasked {\n  @Prop() label: string;\n  @Prop() name: any;\n  @Prop() error: string;\n  @Prop() defaultValue: string;\n  @Prop() inputHandler: (name: string, value: string) => void;\n  @Prop() mask: string;\n  @Prop() disabled: boolean;\n\n  private imask: InputMask<any> | null = null;\n\n  textInput!: HTMLInputElement;\n\n  @Event() formControlInput: EventEmitter<any>;\n  @Event() formControlBlur: EventEmitter<any>;\n\n  @Watch('defaultValue')\n  handleDefaultValueChange(newValue: string) {\n    this.updateInput(newValue);\n  }\n\n  componentDidLoad() {\n    if (this.textInput && this.mask) {\n      this.imask = IMask(this.textInput, {\n        mask: this.mask,\n      });\n\n      this.imask.on('accept', () => {\n        const rawValue = this.imask.unmaskedValue;\n        this.inputHandler(this.name, rawValue);\n      });\n\n      this.textInput.addEventListener('blur', () => {\n        this.formControlBlur.emit();\n      });\n\n      this.updateInput(this.defaultValue);\n    }\n  }\n\n  disconnectedCallback() {\n    this.imask?.destroy();\n  }\n\n  updateInput(newValue: any) {\n    if (this.imask) {\n      this.imask.value = String(newValue);\n    }\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <label part=\"label\" class=\"form-label\" htmlFor={this.name}>\n          {this.label}\n        </label>\n        <input\n          ref={el => (this.textInput = el as HTMLInputElement)}\n          id={this.name}\n          name={this.name}\n          onBlur={() => this.formControlBlur.emit()}\n          part={`input ${this.error && 'input-invalid'}`}\n          class={this.error ? 'form-control is-invalid' : 'form-control'}\n          type=\"text\"\n          disabled={this.disabled}\n        />\n        {this.error && <div class=\"invalid-feedback\">{this.error}</div>}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"form-control-number-masked.js","sourceRoot":"","sources":["../../../../src/components/form/form-control-number-masked.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,MAAM,OAAO,iBAAiB;;IASpB,UAAK,GAA0B,IAAI,CAAC;;;;;;;;;EAQ5C,wBAAwB,CAAC,QAAgB;IACvC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;EAC7B,CAAC;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE;MAC/B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;QACjC,IAAI,EAAE,IAAI,CAAC,IAAI;OAChB,CAAC,CAAC;MAEH,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE;QAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;QAC1C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;MACzC,CAAC,CAAC,CAAC;MAEH,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;QAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;MAC9B,CAAC,CAAC,CAAC;MAEH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACrC;EACH,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,EAAE,CAAC;EACxB,CAAC;EAED,WAAW,CAAC,QAAa;IACvB,IAAI,IAAI,CAAC,KAAK,IAAI,QAAQ,EAAE;MAC1B,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;KACrC;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,WAAW,EAAC,2BAA2B;MAC3C,aAAO,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,IACtD,IAAI,CAAC,KAAK,CACL;MACR,aACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAsB,CAAC,EACpD,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EACzC,IAAI,EAAE,SAAS,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,cAAc,EAC9D,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB;MACD,IAAI,CAAC,KAAK,IAAI,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAO,CAC1D,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n} from '@stencil/core';\nimport IMask, { InputMask } from 'imask';\n\n@Component({\n  tag: 'form-control-number-masked',\n  styleUrl: 'form-control-number.scss',\n  shadow: true,\n})\nexport class NumberInputMasked {\n  @Prop() label: string;\n  @Prop() name: any;\n  @Prop() error: string;\n  @Prop() defaultValue: string;\n  @Prop() inputHandler: (name: string, value: string) => void;\n  @Prop() mask: string;\n  @Prop() disabled: boolean;\n\n  private imask: InputMask<any> | null = null;\n\n  textInput!: HTMLInputElement;\n\n  @Event() formControlInput: EventEmitter<any>;\n  @Event() formControlBlur: EventEmitter<any>;\n\n  @Watch('defaultValue')\n  handleDefaultValueChange(newValue: string) {\n    this.updateInput(newValue);\n  }\n\n  componentDidLoad() {\n    if (this.textInput && this.mask) {\n      this.imask = IMask(this.textInput, {\n        mask: this.mask,\n      });\n\n      this.imask.on('accept', () => {\n        const rawValue = this.imask.unmaskedValue;\n        this.inputHandler(this.name, rawValue);\n      });\n\n      this.textInput.addEventListener('blur', () => {\n        this.formControlBlur.emit();\n      });\n\n      this.updateInput(this.defaultValue);\n    }\n  }\n\n  disconnectedCallback() {\n    this.imask?.destroy();\n  }\n\n  updateInput(newValue: any) {\n    if (this.imask && newValue) {\n      this.imask.value = String(newValue);\n    }\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <label part=\"label\" class=\"form-label\" htmlFor={this.name}>\n          {this.label}\n        </label>\n        <input\n          ref={el => (this.textInput = el as HTMLInputElement)}\n          id={this.name}\n          name={this.name}\n          onBlur={() => this.formControlBlur.emit()}\n          part={`input ${this.error && 'input-invalid'}`}\n          class={this.error ? 'form-control is-invalid' : 'form-control'}\n          type=\"text\"\n          disabled={this.disabled}\n        />\n        {this.error && <div class=\"invalid-feedback\">{this.error}</div>}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -52,11 +52,11 @@ export class FormController {
     const properties = Array.isArray(path) ? path : path.split('.');
     this.setNestedError(obj, properties, message);
   }
-  async validate() {
+  async validate(context) {
     this._isValid = true;
     this._errors = {};
     try {
-      await this._schema.validate(this._values, { abortEarly: false });
+      await this._schema.validate(this._values, { context, abortEarly: false });
     }
     catch (err) {
       this._isValid = false;
@@ -67,8 +67,8 @@ export class FormController {
     this.errors.next(this._errors);
     return this._isValid;
   }
-  async validateAndSubmit(submitHandler) {
-    const isValid = await this.validate();
+  async validateAndSubmit(submitHandler, context) {
+    const isValid = await this.validate(context || {});
     if (isValid) {
       submitHandler();
     }

package/dist/collection/components/form/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../src/components/form/form.ts"],"names":[],"mappings":"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","sourcesContent":["import { BehaviorSubject } from 'rxjs';\nimport { ObjectSchema, ValidationError } from 'yup';\n\nexport class FormController {\n  public values = new BehaviorSubject<any>({});\n  public errors = new BehaviorSubject<any>({});\n\n  private _schema: ObjectSchema<any>;\n  private _initialValues: any = {};\n  private _values: any = {};\n  private _errors: any = {};\n  private _isValid = true;\n\n  constructor(schema: ObjectSchema<any>) {\n    this._schema = schema;\n  }\n\n  private processArrayError(\n    obj: any,\n    property: string,\n    remainingProperties: string[],\n    message: string,\n  ): void {\n    // Extract array name and index from the property string\n    const [arrayName, indexStr] = property\n      .match(/^([a-zA-Z0-9]+)\\[(\\d+)\\]/)\n      .slice(1);\n    const index = parseInt(indexStr, 10);\n\n    // Ensure the array exists and has an entry at the given index\n    obj[arrayName] = obj[arrayName] || [];\n    obj[arrayName][index] = obj[arrayName][index] || {};\n\n    // Recursively set the error if there are remaining properties, else set the error message\n    if (remainingProperties.length) {\n      this.setNestedError(obj[arrayName][index], remainingProperties, message);\n    } else {\n      obj[arrayName][index] = message;\n    }\n  }\n\n  private processRegularError(\n    obj: any,\n    property: string,\n    remainingProperties: string[],\n    message: string,\n  ): void {\n    // Ensure the property exists\n    obj[property] = obj[property] || {};\n\n    // Recursively set the error if there are remaining properties, else set the error message\n    if (remainingProperties.length) {\n      this.setNestedError(obj[property], remainingProperties, message);\n    } else {\n      obj[property] = message;\n    }\n  }\n\n  private setNestedError(\n    obj: any,\n    properties: string[],\n    message: string,\n  ): void {\n    const property = properties.shift();\n    const isArrayError = property.includes('[');\n\n    if (isArrayError) {\n      this.processArrayError(obj, property, properties, message);\n    } else {\n      this.processRegularError(obj, property, properties, message);\n    }\n  }\n\n  private setError(obj: any, path: string, message: string): void {\n    // Convert path to properties array\n    const properties = Array.isArray(path) ? path : path.split('.');\n    this.setNestedError(obj, properties, message);\n  }\n\n  private async validate(): Promise<boolean> {\n    this._isValid = true;\n    this._errors = {};\n\n    try {\n      await this._schema.validate(this._values, { abortEarly: false });\n    } catch (err) {\n      this._isValid = false;\n      err.inner.forEach((item: ValidationError) => {\n        this.setError(this._errors, item.path, item.message);\n      });\n    }\n\n    this.errors.next(this._errors);\n    return this._isValid;\n  }\n\n  public async validateAndSubmit(submitHandler: () => void): Promise<void> {\n    const isValid = await this.validate();\n    if (isValid) {\n      submitHandler();\n    }\n  }\n\n  public setInitialValues(values: any): void {\n    this._initialValues = values;\n    this._values = values;\n    this.values.next(this._values);\n  }\n\n  public setValues(values: any): void {\n    this._values = { ...this._values, ...values };\n    this.values.next(this._values);\n  }\n\n  public resetValues(): void {\n    this._values = this._initialValues;\n    this.values.next(this._values);\n  }\n\n  public getInitialValues(): any {\n    return this._initialValues;\n  }\n}\n"]}
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../src/components/form/form.ts"],"names":[],"mappings":"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","sourcesContent":["import { BehaviorSubject } from 'rxjs';\nimport { ObjectSchema, ValidationError } from 'yup';\n\nexport class FormController {\n  public values = new BehaviorSubject<any>({});\n  public errors = new BehaviorSubject<any>({});\n\n  private _schema: ObjectSchema<any>;\n  private _initialValues: any = {};\n  private _values: any = {};\n  private _errors: any = {};\n  private _isValid = true;\n\n  constructor(schema: ObjectSchema<any>) {\n    this._schema = schema;\n  }\n\n  private processArrayError(\n    obj: any,\n    property: string,\n    remainingProperties: string[],\n    message: string,\n  ): void {\n    // Extract array name and index from the property string\n    const [arrayName, indexStr] = property\n      .match(/^([a-zA-Z0-9]+)\\[(\\d+)\\]/)\n      .slice(1);\n    const index = parseInt(indexStr, 10);\n\n    // Ensure the array exists and has an entry at the given index\n    obj[arrayName] = obj[arrayName] || [];\n    obj[arrayName][index] = obj[arrayName][index] || {};\n\n    // Recursively set the error if there are remaining properties, else set the error message\n    if (remainingProperties.length) {\n      this.setNestedError(obj[arrayName][index], remainingProperties, message);\n    } else {\n      obj[arrayName][index] = message;\n    }\n  }\n\n  private processRegularError(\n    obj: any,\n    property: string,\n    remainingProperties: string[],\n    message: string,\n  ): void {\n    // Ensure the property exists\n    obj[property] = obj[property] || {};\n\n    // Recursively set the error if there are remaining properties, else set the error message\n    if (remainingProperties.length) {\n      this.setNestedError(obj[property], remainingProperties, message);\n    } else {\n      obj[property] = message;\n    }\n  }\n\n  private setNestedError(\n    obj: any,\n    properties: string[],\n    message: string,\n  ): void {\n    const property = properties.shift();\n    const isArrayError = property.includes('[');\n\n    if (isArrayError) {\n      this.processArrayError(obj, property, properties, message);\n    } else {\n      this.processRegularError(obj, property, properties, message);\n    }\n  }\n\n  private setError(obj: any, path: string, message: string): void {\n    // Convert path to properties array\n    const properties = Array.isArray(path) ? path : path.split('.');\n    this.setNestedError(obj, properties, message);\n  }\n\n  private async validate(context?: any): Promise<boolean> {\n    this._isValid = true;\n    this._errors = {};\n\n    try {\n      await this._schema.validate(this._values, { context, abortEarly: false });\n    } catch (err) {\n      this._isValid = false;\n      err.inner.forEach((item: ValidationError) => {\n        this.setError(this._errors, item.path, item.message);\n      });\n    }\n\n    this.errors.next(this._errors);\n    return this._isValid;\n  }\n\n  public async validateAndSubmit(\n    submitHandler: () => void,\n    context?: any,\n  ): Promise<void> {\n    const isValid = await this.validate(context || {});\n    if (isValid) {\n      submitHandler();\n    }\n  }\n\n  public setInitialValues(values: any): void {\n    this._initialValues = values;\n    this._values = values;\n    this.values.next(this._values);\n  }\n\n  public setValues(values: any): void {\n    this._values = { ...this._values, ...values };\n    this.values.next(this._values);\n  }\n\n  public resetValues(): void {\n    this._values = this._initialValues;\n    this.values.next(this._values);\n  }\n\n  public getInitialValues(): any {\n    return this._initialValues;\n  }\n}\n"]}