@foxy.io/elements 1.25.0-beta.1 → 1.25.0-beta.3

package/dist/elements/public/Pagination/Pagination.js

@@ -57,77 +57,82 @@ export class Pagination extends Base {
         const { disabled, lang, ns } = this;
         const returnedItemsValue = Number(get(data, 'returned_items'));
         const returnedItems = Number.isNaN(returnedItemsValue) ? 0 : returnedItemsValue;
-        const totalItemsValue = Number(get(data, 'total_items'));
-        const totalItems = Number.isNaN(totalItemsValue) ? 0 : totalItemsValue;
+        const totalValue = Number(get(data, 'total_items'));
+        const total = Number.isNaN(totalValue) ? 0 : totalValue;
         const offsetValue = Number(get(data, 'offset'));
         const offset = Number.isNaN(offsetValue) ? 0 : offsetValue;
         const canGoBack = !disabled && offset > 0;
-        const canGoForth = !disabled && offset + returnedItems < totalItems;
+        const canGoForth = !disabled && offset + returnedItems < total;
         const labelClass = 'sr-only sm-not-sr-only';
+        const from = offset + 1;
+        const to = offset + returnedItems;
         return html `
       <slot @slotchange=${this.__connectPageElement}></slot>
 
-      <div class="grid gap-s items-center -mx-xs" style="grid-template-columns: 1fr auto 1fr">
-        <div class="flex items-center space-x-s">
-          <vaadin-button
-            data-testid="first"
-            theme="contrast tertiary-inline"
-            ?disabled=${!canGoBack}
-            @click=${() => this.__goTo('first')}
-          >
-            <iron-icon class="icon-inline text-s" icon="icons:first-page"></iron-icon>
-            <foxy-i18n class=${labelClass} lang=${lang} key="first" ns=${ns}></foxy-i18n>
-          </vaadin-button>
+      ${offset > 0 || offset + returnedItems < total
+            ? html `
+            <div
+              class="mt-s grid gap-s items-center -mx-xs"
+              style="grid-template-columns: 1fr auto 1fr"
+            >
+              <div class="flex items-center space-x-s">
+                <vaadin-button
+                  data-testid="first"
+                  theme="contrast tertiary-inline"
+                  ?disabled=${!canGoBack}
+                  @click=${() => this.__goTo('first')}
+                >
+                  <iron-icon class="icon-inline text-s" icon="icons:first-page"></iron-icon>
+                  <foxy-i18n class=${labelClass} lang=${lang} key="first" ns=${ns}></foxy-i18n>
+                </vaadin-button>
 
-          <vaadin-button
-            data-testid="prev"
-            theme="contrast tertiary-inline"
-            ?disabled=${!canGoBack}
-            @click=${() => this.__goTo('prev')}
-          >
-            <iron-icon class="icon-inline text-s" icon="icons:chevron-left"></iron-icon>
-            <foxy-i18n class=${labelClass} lang=${lang} key="previous" ns=${ns}></foxy-i18n>
-          </vaadin-button>
-        </div>
+                <vaadin-button
+                  data-testid="prev"
+                  theme="contrast tertiary-inline"
+                  ?disabled=${!canGoBack}
+                  @click=${() => this.__goTo('prev')}
+                >
+                  <iron-icon class="icon-inline text-s" icon="icons:chevron-left"></iron-icon>
+                  <foxy-i18n class=${labelClass} lang=${lang} key="previous" ns=${ns}></foxy-i18n>
+                </vaadin-button>
+              </div>
 
-        <foxy-i18n
-          options=${JSON.stringify({
-            total: totalItems,
-            from: offset ? offset + 1 : 0,
-            to: offset + returnedItems,
-        })}
-          class=${classMap({
-            'flex-1 text-xs text-tertiary text-center leading-xs truncate': true,
-            'opacity-0': !data,
-        })}
-          lang=${lang}
-          key="pagination"
-          ns=${ns}
-        >
-        </foxy-i18n>
+              <foxy-i18n
+                options=${JSON.stringify({ total, from, to })}
+                class=${classMap({
+                'flex-1 text-xs text-tertiary text-center leading-xs truncate': true,
+                'opacity-0': !data,
+            })}
+                lang=${lang}
+                key="pagination"
+                ns=${ns}
+              >
+              </foxy-i18n>
 
-        <div class="flex items-center justify-end space-x-s">
-          <vaadin-button
-            data-testid="next"
-            theme="contrast tertiary-inline"
-            ?disabled=${!canGoForth}
-            @click=${() => this.__goTo('next')}
-          >
-            <foxy-i18n class=${labelClass} lang=${lang} key="next" ns=${ns}></foxy-i18n>
-            <iron-icon class="icon-inline text-s" icon="icons:chevron-right"></iron-icon>
-          </vaadin-button>
+              <div class="flex items-center justify-end space-x-s">
+                <vaadin-button
+                  data-testid="next"
+                  theme="contrast tertiary-inline"
+                  ?disabled=${!canGoForth}
+                  @click=${() => this.__goTo('next')}
+                >
+                  <foxy-i18n class=${labelClass} lang=${lang} key="next" ns=${ns}></foxy-i18n>
+                  <iron-icon class="icon-inline text-s" icon="icons:chevron-right"></iron-icon>
+                </vaadin-button>
 
-          <vaadin-button
-            data-testid="last"
-            theme="contrast tertiary-inline"
-            ?disabled=${!canGoForth}
-            @click=${() => this.__goTo('last')}
-          >
-            <foxy-i18n class=${labelClass} lang=${lang} key="last" ns=${ns}></foxy-i18n>
-            <iron-icon class="icon-inline text-s" icon="icons:last-page"></iron-icon>
-          </vaadin-button>
-        </div>
-      </div>
+                <vaadin-button
+                  data-testid="last"
+                  theme="contrast tertiary-inline"
+                  ?disabled=${!canGoForth}
+                  @click=${() => this.__goTo('last')}
+                >
+                  <foxy-i18n class=${labelClass} lang=${lang} key="last" ns=${ns}></foxy-i18n>
+                  <iron-icon class="icon-inline text-s" icon="icons:last-page"></iron-icon>
+                </vaadin-button>
+              </div>
+            </div>
+          `
+            : ''}
     `;
     }
     disconnectedCallback() {

package/dist/elements/public/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../../src/elements/public/Pagination/Pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport get from 'lodash-es/get';\nimport { InferrableMixin } from '../../../mixins/inferrable';\n\nconst NS = 'pagination';\nconst Base = ResponsiveMixin(\n  ConfigurableMixin(ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement), NS)))\n);\n\n/**\n * Helper element that adds pagination controls to elements\n * representing Hypermedia API collection pages. Works with NucleonElement instances only.\n * Page element **MUST** be a direct descendant of `foxy-pagination`.\n *\n * @example\n * ```html\n * <foxy-pagination first=\"https://demo.api/hapi/customers?limit=3\">\n *   <foxy-customers-table></foxy-customers-table>\n * </foxy-pagination>\n * ```\n *\n * @element foxy-pagination\n * @since 1.15.0\n */\nexport class Pagination extends Base {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      first: { type: String },\n      __pageElement: { attribute: false },\n    };\n  }\n\n  private __pageElement: NucleonElement<any> | null = null;\n\n  private __rerender = () => this.requestUpdate();\n\n  private __first = '';\n\n  /** URL of the first page of the colletion. */\n  get first(): string {\n    return this.__first;\n  }\n\n  set first(newValue: string) {\n    this.__first = newValue;\n    if (this.__pageElement) this.__pageElement.href = newValue;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.__connectPageElement();\n  }\n\n  render(): TemplateResult {\n    const data = this.__pageElement?.data;\n    const { disabled, lang, ns } = this;\n\n    const returnedItemsValue = Number(get(data, 'returned_items'));\n    const returnedItems = Number.isNaN(returnedItemsValue) ? 0 : returnedItemsValue;\n\n    const totalItemsValue = Number(get(data, 'total_items'));\n    const totalItems = Number.isNaN(totalItemsValue) ? 0 : totalItemsValue;\n\n    const offsetValue = Number(get(data, 'offset'));\n    const offset = Number.isNaN(offsetValue) ? 0 : offsetValue;\n\n    const canGoBack = !disabled && offset > 0;\n    const canGoForth = !disabled && offset + returnedItems < totalItems;\n\n    const labelClass = 'sr-only sm-not-sr-only';\n\n    return html`\n      <slot @slotchange=${this.__connectPageElement}></slot>\n\n      <div class=\"grid gap-s items-center -mx-xs\" style=\"grid-template-columns: 1fr auto 1fr\">\n        <div class=\"flex items-center space-x-s\">\n          <vaadin-button\n            data-testid=\"first\"\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoBack}\n            @click=${() => this.__goTo('first')}\n          >\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:first-page\"></iron-icon>\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"first\" ns=${ns}></foxy-i18n>\n          </vaadin-button>\n\n          <vaadin-button\n            data-testid=\"prev\"\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoBack}\n            @click=${() => this.__goTo('prev')}\n          >\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:chevron-left\"></iron-icon>\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"previous\" ns=${ns}></foxy-i18n>\n          </vaadin-button>\n        </div>\n\n        <foxy-i18n\n          options=${JSON.stringify({\n            total: totalItems,\n            from: offset ? offset + 1 : 0,\n            to: offset + returnedItems,\n          })}\n          class=${classMap({\n            'flex-1 text-xs text-tertiary text-center leading-xs truncate': true,\n            'opacity-0': !data,\n          })}\n          lang=${lang}\n          key=\"pagination\"\n          ns=${ns}\n        >\n        </foxy-i18n>\n\n        <div class=\"flex items-center justify-end space-x-s\">\n          <vaadin-button\n            data-testid=\"next\"\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoForth}\n            @click=${() => this.__goTo('next')}\n          >\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"next\" ns=${ns}></foxy-i18n>\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:chevron-right\"></iron-icon>\n          </vaadin-button>\n\n          <vaadin-button\n            data-testid=\"last\"\n            theme=\"contrast tertiary-inline\"\n            ?disabled=${!canGoForth}\n            @click=${() => this.__goTo('last')}\n          >\n            <foxy-i18n class=${labelClass} lang=${lang} key=\"last\" ns=${ns}></foxy-i18n>\n            <iron-icon class=\"icon-inline text-s\" icon=\"icons:last-page\"></iron-icon>\n          </vaadin-button>\n        </div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__disconnectPageElement();\n  }\n\n  private __goTo(rel: string): void {\n    this.__pageElement!.href = String(get(this.__pageElement?.data, `_links.${rel}.href`));\n  }\n\n  private __disconnectPageElement() {\n    this.__pageElement?.removeEventListener('update', this.__rerender);\n    this.__pageElement = null;\n  }\n\n  private __connectPageElement() {\n    this.__disconnectPageElement();\n\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot');\n    const assignedElements = slot?.assignedElements() ?? [];\n    const firstNucleonElement = assignedElements.find(el => el instanceof NucleonElement) as\n      | NucleonElement<any>\n      | undefined;\n\n    if (firstNucleonElement) {\n      this.__pageElement = firstNucleonElement;\n      this.__pageElement.addEventListener('update', this.__rerender);\n      this.__pageElement.href = this.first;\n    }\n  }\n}\n"]}
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../../src/elements/public/Pagination/Pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport get from 'lodash-es/get';\nimport { InferrableMixin } from '../../../mixins/inferrable';\n\nconst NS = 'pagination';\nconst Base = ResponsiveMixin(\n  ConfigurableMixin(ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement), NS)))\n);\n\n/**\n * Helper element that adds pagination controls to elements\n * representing Hypermedia API collection pages. Works with NucleonElement instances only.\n * Page element **MUST** be a direct descendant of `foxy-pagination`.\n *\n * @example\n * ```html\n * <foxy-pagination first=\"https://demo.api/hapi/customers?limit=3\">\n *   <foxy-customers-table></foxy-customers-table>\n * </foxy-pagination>\n * ```\n *\n * @element foxy-pagination\n * @since 1.15.0\n */\nexport class Pagination extends Base {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      first: { type: String },\n      __pageElement: { attribute: false },\n    };\n  }\n\n  private __pageElement: NucleonElement<any> | null = null;\n\n  private __rerender = () => this.requestUpdate();\n\n  private __first = '';\n\n  /** URL of the first page of the colletion. */\n  get first(): string {\n    return this.__first;\n  }\n\n  set first(newValue: string) {\n    this.__first = newValue;\n    if (this.__pageElement) this.__pageElement.href = newValue;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.__connectPageElement();\n  }\n\n  render(): TemplateResult {\n    const data = this.__pageElement?.data;\n    const { disabled, lang, ns } = this;\n\n    const returnedItemsValue = Number(get(data, 'returned_items'));\n    const returnedItems = Number.isNaN(returnedItemsValue) ? 0 : returnedItemsValue;\n\n    const totalValue = Number(get(data, 'total_items'));\n    const total = Number.isNaN(totalValue) ? 0 : totalValue;\n\n    const offsetValue = Number(get(data, 'offset'));\n    const offset = Number.isNaN(offsetValue) ? 0 : offsetValue;\n\n    const canGoBack = !disabled && offset > 0;\n    const canGoForth = !disabled && offset + returnedItems < total;\n\n    const labelClass = 'sr-only sm-not-sr-only';\n    const from = offset + 1;\n    const to = offset + returnedItems;\n\n    return html`\n      <slot @slotchange=${this.__connectPageElement}></slot>\n\n      ${offset > 0 || offset + returnedItems < total\n        ? html`\n            <div\n              class=\"mt-s grid gap-s items-center -mx-xs\"\n              style=\"grid-template-columns: 1fr auto 1fr\"\n            >\n              <div class=\"flex items-center space-x-s\">\n                <vaadin-button\n                  data-testid=\"first\"\n                  theme=\"contrast tertiary-inline\"\n                  ?disabled=${!canGoBack}\n                  @click=${() => this.__goTo('first')}\n                >\n                  <iron-icon class=\"icon-inline text-s\" icon=\"icons:first-page\"></iron-icon>\n                  <foxy-i18n class=${labelClass} lang=${lang} key=\"first\" ns=${ns}></foxy-i18n>\n                </vaadin-button>\n\n                <vaadin-button\n                  data-testid=\"prev\"\n                  theme=\"contrast tertiary-inline\"\n                  ?disabled=${!canGoBack}\n                  @click=${() => this.__goTo('prev')}\n                >\n                  <iron-icon class=\"icon-inline text-s\" icon=\"icons:chevron-left\"></iron-icon>\n                  <foxy-i18n class=${labelClass} lang=${lang} key=\"previous\" ns=${ns}></foxy-i18n>\n                </vaadin-button>\n              </div>\n\n              <foxy-i18n\n                options=${JSON.stringify({ total, from, to })}\n                class=${classMap({\n                  'flex-1 text-xs text-tertiary text-center leading-xs truncate': true,\n                  'opacity-0': !data,\n                })}\n                lang=${lang}\n                key=\"pagination\"\n                ns=${ns}\n              >\n              </foxy-i18n>\n\n              <div class=\"flex items-center justify-end space-x-s\">\n                <vaadin-button\n                  data-testid=\"next\"\n                  theme=\"contrast tertiary-inline\"\n                  ?disabled=${!canGoForth}\n                  @click=${() => this.__goTo('next')}\n                >\n                  <foxy-i18n class=${labelClass} lang=${lang} key=\"next\" ns=${ns}></foxy-i18n>\n                  <iron-icon class=\"icon-inline text-s\" icon=\"icons:chevron-right\"></iron-icon>\n                </vaadin-button>\n\n                <vaadin-button\n                  data-testid=\"last\"\n                  theme=\"contrast tertiary-inline\"\n                  ?disabled=${!canGoForth}\n                  @click=${() => this.__goTo('last')}\n                >\n                  <foxy-i18n class=${labelClass} lang=${lang} key=\"last\" ns=${ns}></foxy-i18n>\n                  <iron-icon class=\"icon-inline text-s\" icon=\"icons:last-page\"></iron-icon>\n                </vaadin-button>\n              </div>\n            </div>\n          `\n        : ''}\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__disconnectPageElement();\n  }\n\n  private __goTo(rel: string): void {\n    this.__pageElement!.href = String(get(this.__pageElement?.data, `_links.${rel}.href`));\n  }\n\n  private __disconnectPageElement() {\n    this.__pageElement?.removeEventListener('update', this.__rerender);\n    this.__pageElement = null;\n  }\n\n  private __connectPageElement() {\n    this.__disconnectPageElement();\n\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot');\n    const assignedElements = slot?.assignedElements() ?? [];\n    const firstNucleonElement = assignedElements.find(el => el instanceof NucleonElement) as\n      | NucleonElement<any>\n      | undefined;\n\n    if (firstNucleonElement) {\n      this.__pageElement = firstNucleonElement;\n      this.__pageElement.addEventListener('update', this.__rerender);\n      this.__pageElement.href = this.first;\n    }\n  }\n}\n"]}

package/dist/elements/public/PaymentCard/PaymentCard.d.ts

@@ -1,46 +1,34 @@
-import { Data, Templates } from './types';
-import { TemplateResult } from 'lit-html';
-import { NucleonElement } from '../NucleonElement/NucleonElement';
-declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+import type { PropertyDeclarations } from 'lit-element';
+import type { TemplateResult } from 'lit-html';
+import type { Data } from './types';
+import { InternalCard } from '../../internal/InternalCard/InternalCard';
+declare const Base: typeof InternalCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
-} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & {
-    styles: import("lit-element").CSSResultArray;
 };
 /**
- * Basic card displaying a payment.
- *
- * Note: payment gateway names need to be loaded separately. You can obtain
- * them from `fx:property_helpers` using your own Backend API proxy or just hardcode the values
- * you need. Once you have the gateway names, call `I18n.setGateways(names)`.
- *
- * @slot title:before
- * @slot title:after
- *
- * @slot subtitle:before
- * @slot subtitle:after
- *
- * @slot card-info:before
- * @slot card-info:after
- *
- * @slot fraud-risk:before
- * @slot fraud-risk:after
- *
- * @slot processor-response:before
- * @slot processor-response:after
+ * Basic card displaying a payment resource (`fx:payment`).
  *
  * @element foxy-payment-card
  * @since 1.11.0
  */
 export declare class PaymentCard extends Base<Data> {
-    templates: Templates;
-    private __currencyDisplay;
-    private __currency;
-    render(): TemplateResult;
-    protected _sendGet(): Promise<Data>;
-    private __renderTitle;
-    private __renderSubtitle;
-    private __renderCardInfo;
-    private __renderFraudRisk;
-    private __renderProcessorResponse;
+    static get properties(): PropertyDeclarations;
+    /** URL of the `fx:hosted_payment_gateways` property helper resource. */
+    hostedPaymentGatewaysHelper: string | null;
+    /** URL of the `fx:payment_gateways` property helper resource. */
+    paymentGatewaysHelper: string | null;
+    private readonly __hostedPaymentGatewaysLoaderId;
+    private readonly __paymentGatewaysLoaderId;
+    private readonly __transactionLoaderId;
+    private readonly __storeLoaderId;
+    renderBody(): TemplateResult;
+    get isBodyReady(): boolean;
+    private get __hostedPaymentGatewaysLoader();
+    private get __paymentGatewaysLoader();
+    private get __transactionLoader();
+    private get __storeLoader();
+    private get __currencyDisplay();
+    private get __currencyCode();
+    private get __gatewayName();
 }
 export {};

package/dist/elements/public/PaymentCard/PaymentCard.js

@@ -1,32 +1,12 @@
 import * as logos from "../PaymentMethodCard/logos.js";
-import { html } from 'lit-html';
-import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { NucleonElement } from "../NucleonElement/NucleonElement.js";
-import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { classMap } from "../../../utils/class-map.js";
-const Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, 'payment-card')));
+import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
+const NS = 'payment-card';
+const Base = TranslatableMixin(InternalCard, NS);
 /**
- * Basic card displaying a payment.
- *
- * Note: payment gateway names need to be loaded separately. You can obtain
- * them from `fx:property_helpers` using your own Backend API proxy or just hardcode the values
- * you need. Once you have the gateway names, call `I18n.setGateways(names)`.
- *
- * @slot title:before
- * @slot title:after
- *
- * @slot subtitle:before
- * @slot subtitle:after
- *
- * @slot card-info:before
- * @slot card-info:after
- *
- * @slot fraud-risk:before
- * @slot fraud-risk:after
- *
- * @slot processor-response:before
- * @slot processor-response:after
+ * Basic card displaying a payment resource (`fx:payment`).
  *
  * @element foxy-payment-card
  * @since 1.11.0
@@ -34,152 +14,153 @@ const Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement,
 export class PaymentCard extends Base {
     constructor() {
         super(...arguments);
-        this.templates = {};
-        this.__currencyDisplay = '';
-        this.__currency = '';
+        /** URL of the `fx:hosted_payment_gateways` property helper resource. */
+        this.hostedPaymentGatewaysHelper = null;
+        /** URL of the `fx:payment_gateways` property helper resource. */
+        this.paymentGatewaysHelper = null;
+        this.__hostedPaymentGatewaysLoaderId = 'hostedPaymentGatewaysLoader';
+        this.__paymentGatewaysLoaderId = 'paymentGatewaysLoader';
+        this.__transactionLoaderId = 'transactionLoader';
+        this.__storeLoaderId = 'storeLoader';
     }
-    render() {
-        var _a, _b;
-        const hidden = this.hiddenSelector;
-        const isCardInfoHidden = hidden.matches('card-info', true);
-        const isFraudRiskHidden = hidden.matches('fraud-risk', true);
+    static get properties() {
+        return {
+            ...super.properties,
+            hostedPaymentGatewaysHelper: { attribute: 'hosted-payment-gateways-helper' },
+            paymentGatewaysHelper: { attribute: 'payment-gateways-helper' },
+        };
+    }
+    renderBody() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const data = this.data;
+        const amount = `${(_a = data === null || data === void 0 ? void 0 : data.amount) !== null && _a !== void 0 ? _a : ''} ${this.__currencyCode}`;
+        const amountOptions = { currencyDisplay: this.__currencyDisplay, amount };
+        const infoKeys = [
+            'processor_response',
+            'paypal_payer_id',
+            'third_party_id',
+            'purchase_order',
+        ];
+        const score = (_c = (_b = this.data) === null || _b === void 0 ? void 0 : _b.fraud_protection_score) !== null && _c !== void 0 ? _c : 0;
+        const scoreColor = score > 0 ? 'text-error' : 'text-success';
+        const scoreBackground = score > 0 ? 'bg-error-10' : 'bg-success-10';
+        const type = ((_d = data === null || data === void 0 ? void 0 : data.cc_type) !== null && _d !== void 0 ? _d : 'unknown').toLowerCase();
+        const year = (_e = data === null || data === void 0 ? void 0 : data.cc_exp_year) === null || _e === void 0 ? void 0 : _e.substring(2);
+        const month = data === null || data === void 0 ? void 0 : data.cc_exp_month;
+        const last4Digits = (_f = data === null || data === void 0 ? void 0 : data.cc_number_masked) === null || _f === void 0 ? void 0 : _f.replace(/x/gi, '');
         return html `
-      <div
-        aria-busy=${!this.data && this.in('busy')}
-        aria-live="polite"
-        class="relative text-body text-m font-lumo leading-m focus-outline-none"
+      <foxy-nucleon
+        infer=""
+        href=${ifDefined((_g = this.hostedPaymentGatewaysHelper) !== null && _g !== void 0 ? _g : undefined)}
+        id=${this.__hostedPaymentGatewaysLoaderId}
+        @update=${() => this.requestUpdate()}
       >
-        <div
-          class=${classMap({
-            'relative transition duration-250 ease-in-out': true,
-            'opacity-0 pointer-events-none': !this.data,
-        })}
-        >
-          ${hidden.matches('title', true) ? '' : this.__renderTitle()}
-          ${hidden.matches('subtitle', true) ? '' : this.__renderSubtitle()}
-          ${isCardInfoHidden && isFraudRiskHidden
-            ? ''
-            : html `
-                <div class="my-s flex space-x-s overflow-auto">
-                  ${isCardInfoHidden ? '' : this.__renderCardInfo()}
-                  ${isFraudRiskHidden ? '' : this.__renderFraudRisk()}
-                </div>
-              `}
-          ${hidden.matches('processor-response', true) ? '' : this.__renderProcessorResponse()}
-        </div>
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        infer=""
+        href=${ifDefined((_h = this.paymentGatewaysHelper) !== null && _h !== void 0 ? _h : undefined)}
+        id=${this.__paymentGatewaysLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
 
-        <div
-          class=${classMap({
-            'transition duration-250 ease-in-out absolute inset-0 flex': true,
-            'opacity-0 pointer-events-none': !!this.data,
+      <foxy-nucleon
+        infer=""
+        href=${ifDefined(data === null || data === void 0 ? void 0 : data._links['fx:transaction'].href)}
+        id=${this.__transactionLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        infer=""
+        href=${ifDefined(data === null || data === void 0 ? void 0 : data._links['fx:store'].href)}
+        id=${this.__storeLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <p class="leading-s">
+        <span class="block font-medium text-m" data-testid="line-1">
+          <foxy-i18n .options=${amountOptions} infer="" key="price"></foxy-i18n>
+          <span>&nbsp;&bull;&nbsp;</span>
+          <foxy-i18n .options=${{ value: data === null || data === void 0 ? void 0 : data.date_created }} infer="" key="date"></foxy-i18n>
+        </span>
+
+        <span class="block text-s text-secondary">
+          ${this.__gatewayName || html `<foxy-i18n infer="" key="unknown"></foxy-i18n>`}
+        </span>
+
+        ${infoKeys.map(key => {
+            if (!(data === null || data === void 0 ? void 0 : data[key]))
+                return;
+            const css = 'block text-s text-tertiary';
+            return html `<foxy-i18n class=${css} infer="" key=${key} .options=${data}></foxy-i18n>`;
         })}
-        >
-          <foxy-spinner
-            data-testid="spinner"
-            class="m-auto"
-            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}
-            lang=${this.lang}
-            ns="${this.ns} ${(_b = (_a = customElements.get('foxy-spinner')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
+
+        <span class="mt-s flex space-x-s overflow-auto">
+          ${month && year && last4Digits
+            ? html `
+                <span
+                  class="truncate flex items-center h-xs rounded-s overflow-hidden bg-contrast-5"
+                  data-testid="card-info"
+                >
+                  <span class="h-xs">${(_j = logos[type]) !== null && _j !== void 0 ? _j : logos.unknown}</span>
+                  <span class="font-medium px-s">•••• ${last4Digits} ${month}/${year}</span>
+                </span>
+              `
+            : ''}
+
+          <foxy-i18n
+            class="truncate flex font-medium h-xs items-center px-s rounded-s text-s ${scoreColor} ${scoreBackground}"
+            infer=""
+            key="fraud_risk"
+            .options=${{ score }}
           >
-          </foxy-spinner>
-        </div>
-      </div>
+          </foxy-i18n>
+        </span>
+      </p>
     `;
     }
-    async _sendGet() {
-        const payment = await super._sendGet();
-        const [transaction, store] = await Promise.all([
-            super._fetch(payment._links['fx:transaction'].href),
-            super._fetch(payment._links['fx:store'].href),
-        ]);
-        this.__currency = transaction.currency_code;
-        this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';
-        return payment;
+    get isBodyReady() {
+        if (!super.isBodyReady)
+            return false;
+        if (!this.__currencyCode)
+            return false;
+        if (!this.__currencyDisplay)
+            return false;
+        return !this.hostedPaymentGatewaysHelper || !this.paymentGatewaysHelper || !!this.__gatewayName;
     }
-    __renderTitle() {
-        const key = this.data ? `gateways.${this.data.gateway_type}` : '';
-        const ns = `${this.ns} gateways`;
-        return html `
-      <div class="text-m flex text-secondary" data-testid="title">
-        ${this.renderTemplateOrSlot('title:before')}
-        <foxy-i18n lang=${this.lang} key=${key} ns=${ns}></foxy-i18n>&ZeroWidthSpace;
-        ${this.renderTemplateOrSlot('title:after')}
-      </div>
-    `;
+    get __hostedPaymentGatewaysLoader() {
+        return this.renderRoot.querySelector(`#${this.__hostedPaymentGatewaysLoaderId}`);
     }
-    __renderSubtitle() {
-        var _a, _b, _c, _d;
-        const amount = `${(_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.amount) !== null && _b !== void 0 ? _b : ''} ${this.__currency}`;
-        const amountOptions = JSON.stringify({ amount, currencyDisplay: this.__currencyDisplay });
-        const date = (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.date_created) !== null && _d !== void 0 ? _d : '';
-        const dateOptions = JSON.stringify({ value: date });
-        const lang = this.lang;
-        const ns = this.ns;
-        return html `
-      <div class="flex font-medium text-m" data-testid="subtitle">
-        ${this.renderTemplateOrSlot('subtitle:before')}
-
-        <foxy-i18n options=${amountOptions} lang=${lang} key="price" ns=${ns}></foxy-i18n>
-        <span>&nbsp;&bull;&nbsp;</span>
-        <foxy-i18n options=${dateOptions} lang=${lang} key="date" ns=${ns}></foxy-i18n>
-
-        ${this.renderTemplateOrSlot('subtitle:after')}
-      </div>
-    `;
+    get __paymentGatewaysLoader() {
+        return this.renderRoot.querySelector(`#${this.__paymentGatewaysLoaderId}`);
     }
-    __renderCardInfo() {
-        var _a, _b, _c, _d;
-        const data = this.data;
-        const type = ((_a = data === null || data === void 0 ? void 0 : data.cc_type) !== null && _a !== void 0 ? _a : 'unknown').toLowerCase();
-        const year = (_b = data === null || data === void 0 ? void 0 : data.cc_exp_year) === null || _b === void 0 ? void 0 : _b.substring(2);
-        const month = data === null || data === void 0 ? void 0 : data.cc_exp_month;
-        const last4Digits = (_c = data === null || data === void 0 ? void 0 : data.cc_number_masked) === null || _c === void 0 ? void 0 : _c.replace(/x/gi, '');
-        if (!month || !year || !last4Digits)
-            return;
-        return html `
-      <div class="flex" data-testid="card-info">
-        ${this.renderTemplateOrSlot('card-info:before')}
-
-        <div class="truncate flex items-center h-s rounded overflow-hidden bg-contrast-5">
-          <div class="h-s">${(_d = logos[type]) !== null && _d !== void 0 ? _d : logos.unknown}</div>
-          <div class="text-m font-medium px-s">•••• ${last4Digits} ${month}/${year}</div>
-        </div>
-
-        ${this.renderTemplateOrSlot('card-info:after')}
-      </div>
-    `;
+    get __transactionLoader() {
+        return this.renderRoot.querySelector(`#${this.__transactionLoaderId}`);
     }
-    __renderFraudRisk() {
-        var _a, _b;
-        const score = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.fraud_protection_score) !== null && _b !== void 0 ? _b : 0;
-        const color = score > 0 ? 'text-error' : 'text-success';
-        const background = score > 0 ? 'bg-error-10' : 'bg-success-10';
-        return html `
-      <div class="flex" data-testid="fraud-risk">
-        ${this.renderTemplateOrSlot('fraud-risk:before')}
-
-        <foxy-i18n
-          options=${JSON.stringify({ score })}
-          class="truncate flex font-medium h-s items-center px-s rounded text-m ${color} ${background}"
-          lang=${this.lang}
-          key="fraud_risk"
-          ns=${this.ns}
-        >
-        </foxy-i18n>
-
-        ${this.renderTemplateOrSlot('fraud-risk:after')}
-      </div>
-    `;
+    get __storeLoader() {
+        return this.renderRoot.querySelector(`#${this.__storeLoaderId}`);
     }
-    __renderProcessorResponse() {
+    get __currencyDisplay() {
         var _a;
-        return html `
-      <div class="text-m text-tertiary" data-testid="processor-response">
-        ${this.renderTemplateOrSlot('processor-response:before')}
-        ${(_a = this.data) === null || _a === void 0 ? void 0 : _a.processor_response}&ZeroWidthSpace;
-        ${this.renderTemplateOrSlot('processor-response:after')}
-      </div>
-    `;
+        const store = (_a = this.__storeLoader) === null || _a === void 0 ? void 0 : _a.data;
+        return store ? (store.use_international_currency_symbol ? 'code' : 'symbol') : void 0;
+    }
+    get __currencyCode() {
+        var _a, _b;
+        return (_b = (_a = this.__transactionLoader) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.currency_code;
+    }
+    get __gatewayName() {
+        var _a, _b, _c, _d, _e, _f;
+        const type = (_a = this.data) === null || _a === void 0 ? void 0 : _a.gateway_type;
+        if (type) {
+            const gateway = (_c = (_b = this.__paymentGatewaysLoader) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.values[type];
+            const hostedGateway = (_e = (_d = this.__hostedPaymentGatewaysLoader) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.values[type];
+            return (_f = gateway === null || gateway === void 0 ? void 0 : gateway.name) !== null && _f !== void 0 ? _f : hostedGateway === null || hostedGateway === void 0 ? void 0 : hostedGateway.name;
+        }
     }
 }
 //# sourceMappingURL=PaymentCard.js.map