@foxy.io/elements 1.27.0-beta.6 → 1.27.0-beta.8

package/dist/elements/public/PaymentCardEmbedElement/PaymentCardEmbedElement.js

@@ -0,0 +1,198 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { LitElement, html } from 'lit-element';
+import { PaymentCardEmbed } from '@foxy.io/sdk/customer';
+import { InferrableMixin } from "../../../mixins/inferrable.js";
+import { ThemeableMixin } from "../../../mixins/themeable.js";
+import { classMap } from "../../../utils/class-map.js";
+import { set } from 'lodash-es';
+const NS = 'payment-card-embed';
+const Base = ConfigurableMixin(TranslatableMixin(InferrableMixin(ThemeableMixin(LitElement)), NS));
+/**
+ * A secure, PCI-compliant element for collecting payment card information with
+ * support for Stripe, Square and embedded gateways.
+ *
+ * @fires CustomEvent - Instance of `CustomEvent` with type `submit`. Dispatched when the user submits the form (not available for Stripe).
+ *
+ * @element foxy-payment-card-embed
+ * @since 1.27.0
+ */
+export class PaymentCardEmbedElement extends Base {
+    constructor() {
+        super(...arguments);
+        /**
+         * Full Bank Card Embed URL, e.g. `https://embed.foxy.io/v1.html?template_set_id=123`.
+         *
+         * The following demo URLs are available:
+         * - `https://embed.foxy.io/v1.html?demo=default` (Default form)
+         * - `https://embed.foxy.io/v1.html?demo=stripe` (Stripe Card Element)
+         * - `https://embed.foxy.io/v1.html?demo=square` (Square Card Element)
+         */
+        this.url = null;
+        this.__configRefreshInterval = null;
+        this.__embed = null;
+        this.__ready = false;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            __ready: { attribute: false },
+            url: {},
+        };
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        clearInterval((_a = this.__configRefreshInterval) !== null && _a !== void 0 ? _a : undefined);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.__configRefreshInterval = setInterval(() => {
+            var _a;
+            const config = this.__config;
+            if (config)
+                (_a = this.__embed) === null || _a === void 0 ? void 0 : _a.configure(config);
+        }, 1000);
+    }
+    /** Tokenizes payment card info. Resolves with a token on success or rejects otherwise. */
+    tokenize() {
+        var _a, _b;
+        return (_b = (_a = this.__embed) === null || _a === void 0 ? void 0 : _a.tokenize()) !== null && _b !== void 0 ? _b : Promise.reject();
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('hidden') || changes.has('url'))
+            this.__setupEmbed();
+    }
+    render() {
+        return html `
+      <div class="relative">
+        <div
+          class=${classMap({ 'transition-opacity relative': true, 'opacity-0': !this.__ready })}
+          id="iframe-container"
+        ></div>
+
+        <div
+          class=${classMap({
+            'absolute inset-0 flex items-center justify-center': true,
+            'transition-opacity pointer-events-none': true,
+            'opacity-0': this.__ready,
+        })}
+        >
+          <foxy-spinner infer="spinner" layout="no-label"></foxy-spinner>
+        </div>
+
+        <div
+          class="hidden ml-m mr-s bg-contrast-5 text-contrast-10 h-m w-xs rounded-tr-m rounded-br-s font-lumo text-m leading-xs"
+          style="border-top-color: var(--lumo-primary-color); border-bottom-color: var(--lumo-primary-text-color); border-left-color: var(--lumo-primary-color-50pct); border-right-color: var(--lumo-secondary-text-color);"
+          id="d1"
+        ></div>
+
+        <div
+          class="hidden text-s text-disabled"
+          style="background-color: var(--lumo-body-text-color); border-top-color: var(--lumo-error-text-color); border-bottom-color: var(--lumo-error-color-10pct); border-left-color: var(--lumo-error-color-50pct);"
+          id="d2"
+        ></div>
+
+        <div class="hidden text-contrast-50 text-xs bg-base" id="d3"></div>
+      </div>
+    `;
+    }
+    /** Clears form fields. */
+    clear() {
+        var _a;
+        (_a = this.__embed) === null || _a === void 0 ? void 0 : _a.clear();
+    }
+    get __config() {
+        const i18nKeys = [
+            'stripe.label',
+            'stripe.status.idle',
+            'stripe.status.busy',
+            'stripe.status.fail',
+            'square.label',
+            'square.status.idle',
+            'square.status.busy',
+            'square.status.fail',
+            'default.cc-number.label',
+            'default.cc-number.placeholder',
+            'default.cc-number.v8n_required',
+            'default.cc-number.v8n_invalid',
+            'default.cc-number.v8n_unsupported',
+            'default.cc-exp.label',
+            'default.cc-exp.placeholder',
+            'default.cc-exp.v8n_required',
+            'default.cc-exp.v8n_invalid',
+            'default.cc-exp.v8n_expired',
+            'default.cc-csc.label',
+            'default.cc-csc.placeholder',
+            'default.cc-csc.v8n_required',
+            'default.cc-csc.v8n_invalid',
+            'default.status.idle',
+            'default.status.busy',
+            'default.status.fail',
+            'default.status.misconfigured',
+        ];
+        const d1 = this.renderRoot.querySelector('#d1');
+        const d2 = this.renderRoot.querySelector('#d2');
+        const d3 = this.renderRoot.querySelector('#d3');
+        if (!d1 || !d2 || !d3)
+            return null;
+        const d1Style = getComputedStyle(d1);
+        const d2Style = getComputedStyle(d2);
+        const d3Style = getComputedStyle(d3);
+        const style = {
+            '--lumo-space-m': d1Style.marginLeft,
+            '--lumo-space-s': d1Style.marginRight,
+            '--lumo-contrast-5pct': d1Style.backgroundColor,
+            '--lumo-contrast-10pct': d1Style.color,
+            '--lumo-contrast-50pct': d3Style.color,
+            '--lumo-size-m': d1Style.height,
+            '--lumo-size-xs': d1Style.width,
+            '--lumo-border-radius-m': d1Style.borderTopRightRadius,
+            '--lumo-border-radius-s': d1Style.borderBottomRightRadius,
+            '--lumo-font-family': d1Style.fontFamily,
+            '--lumo-font-size-m': d1Style.fontSize,
+            '--lumo-font-size-s': d2Style.fontSize,
+            '--lumo-font-size-xs': d3Style.fontSize,
+            '--lumo-primary-color': d1Style.borderTopColor,
+            '--lumo-primary-text-color': d1Style.borderBottomColor,
+            '--lumo-primary-color-50pct': d1Style.borderLeftColor,
+            '--lumo-secondary-text-color': d1Style.borderRightColor,
+            '--lumo-disabled-text-color': d2Style.color,
+            '--lumo-body-text-color': d2Style.backgroundColor,
+            '--lumo-error-text-color': d2Style.borderTopColor,
+            '--lumo-error-color-10pct': d2Style.borderBottomColor,
+            '--lumo-error-color-50pct': d2Style.borderLeftColor,
+            '--lumo-line-height-xs': d1Style.lineHeight,
+            '--lumo-base-color': d3Style.backgroundColor,
+        };
+        const translations = {};
+        i18nKeys.forEach(key => set(translations, key, this.t(key)));
+        return {
+            translations: translations,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            style: style,
+            lang: this.lang,
+        };
+    }
+    __setupEmbed() {
+        if (this.__embed)
+            this.__embed.unmount();
+        const config = this.__config;
+        const root = this.renderRoot.querySelector('#iframe-container');
+        const url = this.url;
+        if (url === null || !root || !config || this.hidden) {
+            this.__ready = false;
+            this.__embed = null;
+        }
+        else {
+            const This = this.constructor;
+            this.__embed = new This.PaymentCardEmbed({ url, ...config });
+            this.__embed.mount(root).then(() => (this.__ready = true));
+            this.__embed.onsubmit = () => this.dispatchEvent(new CustomEvent('submit'));
+        }
+    }
+}
+PaymentCardEmbedElement.PaymentCardEmbed = PaymentCardEmbed;
+//# sourceMappingURL=PaymentCardEmbedElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentCardEmbedElement.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentCardEmbedElement/PaymentCardEmbedElement.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PaymentCardEmbedConfig } from '@foxy.io/sdk/dist/types/customer/types';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { LitElement, html } from 'lit-element';\nimport { PaymentCardEmbed } from '@foxy.io/sdk/customer';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { classMap } from '../../../utils/class-map';\nimport { set } from 'lodash-es';\n\nconst NS = 'payment-card-embed';\nconst Base = ConfigurableMixin(TranslatableMixin(InferrableMixin(ThemeableMixin(LitElement)), NS));\n\n/**\n * A secure, PCI-compliant element for collecting payment card information with\n * support for Stripe, Square and embedded gateways.\n *\n * @fires CustomEvent - Instance of `CustomEvent` with type `submit`. Dispatched when the user submits the form (not available for Stripe).\n *\n * @element foxy-payment-card-embed\n * @since 1.27.0\n */\nexport class PaymentCardEmbedElement extends Base {\n  static readonly PaymentCardEmbed = PaymentCardEmbed;\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __ready: { attribute: false },\n      url: {},\n    };\n  }\n\n  /**\n   * Full Bank Card Embed URL, e.g. `https://embed.foxy.io/v1.html?template_set_id=123`.\n   *\n   * The following demo URLs are available:\n   * - `https://embed.foxy.io/v1.html?demo=default` (Default form)\n   * - `https://embed.foxy.io/v1.html?demo=stripe` (Stripe Card Element)\n   * - `https://embed.foxy.io/v1.html?demo=square` (Square Card Element)\n   */\n  url: string | null = null;\n\n  private __configRefreshInterval: NodeJS.Timeout | null = null;\n\n  private __embed: PaymentCardEmbed | null = null;\n\n  private __ready = false;\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    clearInterval(this.__configRefreshInterval ?? undefined);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.__configRefreshInterval = setInterval(() => {\n      const config = this.__config;\n      if (config) this.__embed?.configure(config);\n    }, 1000);\n  }\n\n  /** Tokenizes payment card info. Resolves with a token on success or rejects otherwise. */\n  tokenize(): Promise<string> {\n    return this.__embed?.tokenize() ?? Promise.reject();\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    if (changes.has('hidden') || changes.has('url')) this.__setupEmbed();\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"relative\">\n        <div\n          class=${classMap({ 'transition-opacity relative': true, 'opacity-0': !this.__ready })}\n          id=\"iframe-container\"\n        ></div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex items-center justify-center': true,\n            'transition-opacity pointer-events-none': true,\n            'opacity-0': this.__ready,\n          })}\n        >\n          <foxy-spinner infer=\"spinner\" layout=\"no-label\"></foxy-spinner>\n        </div>\n\n        <div\n          class=\"hidden ml-m mr-s bg-contrast-5 text-contrast-10 h-m w-xs rounded-tr-m rounded-br-s font-lumo text-m leading-xs\"\n          style=\"border-top-color: var(--lumo-primary-color); border-bottom-color: var(--lumo-primary-text-color); border-left-color: var(--lumo-primary-color-50pct); border-right-color: var(--lumo-secondary-text-color);\"\n          id=\"d1\"\n        ></div>\n\n        <div\n          class=\"hidden text-s text-disabled\"\n          style=\"background-color: var(--lumo-body-text-color); border-top-color: var(--lumo-error-text-color); border-bottom-color: var(--lumo-error-color-10pct); border-left-color: var(--lumo-error-color-50pct);\"\n          id=\"d2\"\n        ></div>\n\n        <div class=\"hidden text-contrast-50 text-xs bg-base\" id=\"d3\"></div>\n      </div>\n    `;\n  }\n\n  /** Clears form fields. */\n  clear(): void {\n    this.__embed?.clear();\n  }\n\n  private get __config(): PaymentCardEmbedConfig | null {\n    type Leaves<T> = T extends Record<string, unknown>\n      ? {\n          [K in keyof T]: `${Exclude<K, symbol>}${Leaves<T[K]> extends never\n            ? ''\n            : `.${Leaves<T[K]>}`}`;\n        }[keyof T]\n      : never;\n\n    const i18nKeys: Leaves<Required<PaymentCardEmbedConfig['translations']>>[] = [\n      'stripe.label',\n      'stripe.status.idle',\n      'stripe.status.busy',\n      'stripe.status.fail',\n      'square.label',\n      'square.status.idle',\n      'square.status.busy',\n      'square.status.fail',\n      'default.cc-number.label',\n      'default.cc-number.placeholder',\n      'default.cc-number.v8n_required',\n      'default.cc-number.v8n_invalid',\n      'default.cc-number.v8n_unsupported',\n      'default.cc-exp.label',\n      'default.cc-exp.placeholder',\n      'default.cc-exp.v8n_required',\n      'default.cc-exp.v8n_invalid',\n      'default.cc-exp.v8n_expired',\n      'default.cc-csc.label',\n      'default.cc-csc.placeholder',\n      'default.cc-csc.v8n_required',\n      'default.cc-csc.v8n_invalid',\n      'default.status.idle',\n      'default.status.busy',\n      'default.status.fail',\n      'default.status.misconfigured',\n    ];\n\n    const d1 = this.renderRoot.querySelector('#d1');\n    const d2 = this.renderRoot.querySelector('#d2');\n    const d3 = this.renderRoot.querySelector('#d3');\n\n    if (!d1 || !d2 || !d3) return null;\n\n    const d1Style = getComputedStyle(d1);\n    const d2Style = getComputedStyle(d2);\n    const d3Style = getComputedStyle(d3);\n\n    const style: Record<string, string> = {\n      '--lumo-space-m': d1Style.marginLeft,\n      '--lumo-space-s': d1Style.marginRight,\n      '--lumo-contrast-5pct': d1Style.backgroundColor,\n      '--lumo-contrast-10pct': d1Style.color,\n      '--lumo-contrast-50pct': d3Style.color,\n      '--lumo-size-m': d1Style.height,\n      '--lumo-size-xs': d1Style.width,\n      '--lumo-border-radius-m': d1Style.borderTopRightRadius,\n      '--lumo-border-radius-s': d1Style.borderBottomRightRadius,\n      '--lumo-font-family': d1Style.fontFamily,\n      '--lumo-font-size-m': d1Style.fontSize,\n      '--lumo-font-size-s': d2Style.fontSize,\n      '--lumo-font-size-xs': d3Style.fontSize,\n      '--lumo-primary-color': d1Style.borderTopColor,\n      '--lumo-primary-text-color': d1Style.borderBottomColor,\n      '--lumo-primary-color-50pct': d1Style.borderLeftColor,\n      '--lumo-secondary-text-color': d1Style.borderRightColor,\n      '--lumo-disabled-text-color': d2Style.color,\n      '--lumo-body-text-color': d2Style.backgroundColor,\n      '--lumo-error-text-color': d2Style.borderTopColor,\n      '--lumo-error-color-10pct': d2Style.borderBottomColor,\n      '--lumo-error-color-50pct': d2Style.borderLeftColor,\n      '--lumo-line-height-xs': d1Style.lineHeight,\n      '--lumo-base-color': d3Style.backgroundColor,\n    };\n\n    const translations: PaymentCardEmbedConfig['translations'] = {};\n    i18nKeys.forEach(key => set(translations, key, this.t(key)));\n\n    return {\n      translations: translations,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      style: style,\n      lang: this.lang,\n    };\n  }\n\n  private __setupEmbed() {\n    if (this.__embed) this.__embed.unmount();\n\n    const config = this.__config;\n    const root = this.renderRoot.querySelector('#iframe-container');\n    const url = this.url;\n\n    if (url === null || !root || !config || this.hidden) {\n      this.__ready = false;\n      this.__embed = null;\n    } else {\n      const This = this.constructor as typeof PaymentCardEmbedElement;\n      this.__embed = new This.PaymentCardEmbed({ url, ...config });\n      this.__embed.mount(root).then(() => (this.__ready = true));\n      this.__embed.onsubmit = () => this.dispatchEvent(new CustomEvent('submit'));\n    }\n  }\n}\n"]}

package/dist/elements/public/PaymentCardEmbedElement/index.d.ts

@@ -0,0 +1,4 @@
+import '../Spinner/index';
+import '../I18n/index';
+import { PaymentCardEmbedElement } from './PaymentCardEmbedElement';
+export { PaymentCardEmbedElement };

package/dist/elements/public/PaymentCardEmbedElement/index.js

@@ -0,0 +1,6 @@
+import "../Spinner/index.js";
+import "../I18n/index.js";
+import { PaymentCardEmbedElement } from "./PaymentCardEmbedElement.js";
+customElements.define('foxy-payment-card-embed', PaymentCardEmbedElement);
+export { PaymentCardEmbedElement };
+//# sourceMappingURL=index.js.map

package/dist/elements/public/PaymentCardEmbedElement/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentCardEmbedElement/index.ts"],"names":[],"mappings":"AAAA,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,uBAAuB,EAAE,qCAAkC;AAEpE,cAAc,CAAC,MAAM,CAAC,yBAAyB,EAAE,uBAAuB,CAAC,CAAC;AAE1E,OAAO,EAAE,uBAAuB,EAAE,CAAC","sourcesContent":["import '../Spinner/index';\nimport '../I18n/index';\n\nimport { PaymentCardEmbedElement } from './PaymentCardEmbedElement';\n\ncustomElements.define('foxy-payment-card-embed', PaymentCardEmbedElement);\n\nexport { PaymentCardEmbedElement };\n"]}

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

@@ -1,6 +1,6 @@
-import { CSSResultArray } from 'lit-element';
-import { Data, Templates } from './types';
-import { TemplateResult } from 'lit-html';
+import type { CSSResultArray, PropertyDeclarations } from 'lit-element';
+import type { Data, Templates } from './types';
+import type { TemplateResult } from 'lit-html';
 import { NucleonElement } from '../NucleonElement/index';
 declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
@@ -14,13 +14,23 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
  * @slot actions:after - **new in v1.4.0**
  * @slot actions:delete:before - **new in v1.4.0**
  * @slot actions:delete:after - **new in v1.4.0**
+ * @slot actions:update:before - **new in v1.27.0**
+ * @slot actions:update:after - **new in v1.27.0**
  *
- * @element foxy-payment-method-form
+ * @element foxy-payment-method-card
  * @since 1.2.0
  */
 export declare class PaymentMethodCard extends Base<Data> {
+    static get properties(): PropertyDeclarations;
     static get styles(): CSSResultArray;
     templates: Templates;
+    /**
+     * Configuration URL for the Payment Card Embed. If provided,
+     * the card will have an option of updating payment method.
+     * Otherwise, only the delete option will be available.
+     */
+    embedUrl: string | null;
+    private readonly __renderActionsUpdate;
     private readonly __renderActionsDelete;
     private readonly __renderActions;
     render(): TemplateResult;

package/dist/elements/public/PaymentMethodCard/PaymentMethodCard.js

@@ -1,12 +1,12 @@
 import * as logos from "./logos.js";
-import { css } from 'lit-element';
-import { html } from 'lit-html';
-import { BooleanSelector } from '@foxy.io/sdk/core';
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
 import { NucleonElement } from "../NucleonElement/index.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
-import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { backgrounds } from "./backgrounds.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { css, html } from 'lit-element';
 import { classMap } from "../../../utils/class-map.js";
 const NS = 'payment-method-card';
 const Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));
@@ -17,14 +17,71 @@ const Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement,
  * @slot actions:after - **new in v1.4.0**
  * @slot actions:delete:before - **new in v1.4.0**
  * @slot actions:delete:after - **new in v1.4.0**
+ * @slot actions:update:before - **new in v1.27.0**
+ * @slot actions:update:after - **new in v1.27.0**
  *
- * @element foxy-payment-method-form
+ * @element foxy-payment-method-card
  * @since 1.2.0
  */
 export class PaymentMethodCard extends Base {
     constructor() {
         super(...arguments);
         this.templates = {};
+        /**
+         * Configuration URL for the Payment Card Embed. If provided,
+         * the card will have an option of updating payment method.
+         * Otherwise, only the delete option will be available.
+         */
+        this.embedUrl = null;
+        this.__renderActionsUpdate = () => {
+            var _a;
+            const hasCC = !!((_a = this.data) === null || _a === void 0 ? void 0 : _a.save_cc);
+            const buttonStyle = hasCC
+                ? '--lumo-primary-text-color: #fff; --lumo-primary-color-50pct: rgba(255, 255, 255, 0.5); --lumo-contrast-5pct: rgba(255, 255, 255, 0.05)'
+                : void 0;
+            return html `
+      <div class="flex">
+        ${this.renderTemplateOrSlot('actions:update:before')}
+
+        <foxy-form-dialog
+          data-testid="update-dialog"
+          readonlycontrols=${this.readonlySelector.zoom('actions:update:form')}
+          disabledcontrols=${this.disabledSelector.zoom('actions:update:form')}
+          hiddencontrols="status ${this.hiddenSelector.zoom('actions:update:form')}"
+          header=${hasCC ? 'dialog_header_update' : 'dialog_header_add'}
+          group=${this.group}
+          form="foxy-update-payment-method-form"
+          href=${this.href}
+          lang=${this.lang}
+          ns="${this.ns} dialog"
+          alert
+          close-on-patch
+          .props=${{ '.embedUrl': this.embedUrl }}
+        >
+        </foxy-form-dialog>
+
+        <vaadin-button
+          class=${ifDefined(hasCC ? 'px-xs rounded' : void 0)}
+          theme=${hasCC ? 'icon' : 'contrast small'}
+          style=${ifDefined(buttonStyle)}
+          aria-label=${this.t(hasCC ? 'update' : 'add')}
+          data-testid="actions:update"
+          ?disabled=${this.disabledSelector.matches('actions:update', true)}
+          @click=${(evt) => {
+                const button = evt.currentTarget;
+                const dialog = button.previousElementSibling;
+                dialog.show(button);
+            }}
+        >
+          ${hasCC
+                ? html `<iron-icon icon="icons:create"></iron-icon>`
+                : html `<foxy-i18n infer="" key="add"></foxy-i18n>`}
+        </vaadin-button>
+
+        ${this.renderTemplateOrSlot('actions:update:after')}
+      </div>
+    `;
+        };
         this.__renderActionsDelete = () => {
             return html `
       <div class="flex">
@@ -47,15 +104,24 @@ export class PaymentMethodCard extends Base {
     `;
         };
         this.__renderActions = () => {
+            const isUpdateHidden = this.hiddenSelector.matches('actions:update', true) || !this.embedUrl;
+            const isDeleteHidden = this.hiddenSelector.matches('actions:delete', true);
             return html `
-      <div class="flex" data-testid="actions">
+      <div class="flex gap-s" data-testid="actions">
         ${this.renderTemplateOrSlot('actions:before')}
-        ${this.hiddenSelector.matches('actions:delete', true) ? '' : this.__renderActionsDelete()}
+        ${isUpdateHidden ? '' : this.__renderActionsUpdate()}
+        ${isDeleteHidden ? '' : this.__renderActionsDelete()}
         ${this.renderTemplateOrSlot('actions:after')}
       </div>
     `;
         };
     }
+    static get properties() {
+        return {
+            ...super.properties,
+            embedUrl: { attribute: 'embed-url' },
+        };
+    }
     static get styles() {
         return [
             super.styles,
@@ -81,6 +147,7 @@ export class PaymentMethodCard extends Base {
         const { data, lang, ns } = this;
         if (this.in({ idle: 'template' }) || !(data === null || data === void 0 ? void 0 : data.save_cc) || !this.in('idle')) {
             const spinnerState = this.in('fail') ? 'error' : this.in('busy') ? 'busy' : 'empty';
+            const isUpdateHidden = this.hiddenSelector.matches('actions:update', true) || !this.embedUrl || !this.data;
             return html `
         <div
           class="ratio-card"
@@ -89,14 +156,16 @@ export class PaymentMethodCard extends Base {
           data-testid="wrapper"
         >
           <div class="h-full bg-contrast-5"></div>
-          <div class="absolute inset-0 flex items-center justify-center">
+          <div class="absolute inset-0 flex flex-col gap-m items-center justify-center">
             <foxy-spinner
               data-testid="spinner"
+              layout="vertical"
               state=${spinnerState}
               lang=${this.lang}
               ns="${ns} ${(_b = (_a = customElements.get('foxy-spinner')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
             >
             </foxy-spinner>
+            ${isUpdateHidden ? '' : this.__renderActionsUpdate()}
           </div>
         </div>
       `;
@@ -130,11 +199,11 @@ export class PaymentMethodCard extends Base {
             'justify-end': this.readonlyControls === BooleanSelector.True,
         })}
           >
+            <div class="mr-auto rounded h-m">${logo}</div>
             ${this.hiddenSelector.matches('actions', true) ? '' : this.__renderActions()}
-            <div class="ml-auto rounded h-m">${logo}</div>
           </div>
 
-          <div class="font-tnum leading-none flex justify-between">
+          <div class="font-tnum leading-none flex justify-between" style="color: white">
             <div data-testid="expiry">
               ${data.cc_exp_month && data.cc_exp_year
             ? html `

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentMethodCard/PaymentMethodCard.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,mBAAgB;AAEjC,OAAO,EAAkB,GAAG,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AAGjE,OAAO,EAAE,cAAc,EAAE,mCAAgC;AACzD,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,yBAAsB;AAC5C,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD,MAAM,EAAE,GAAG,qBAAqB,CAAC;AACjC,MAAM,IAAI,GAAG,cAAc,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;AAEtF;;;;;;;;;;GAUG;AACH,MAAM,OAAO,iBAAkB,SAAQ,IAAU;IAAjD;;QAuBE,cAAS,GAAc,EAAE,CAAC;QAET,0BAAqB,GAAG,GAAG,EAAE;YAC5C,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,uBAAuB,CAAC;;;;;;uBAMrC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE;;sBAE5B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC;mBACxD,IAAI,CAAC,cAAc;;;;;UAK5B,IAAI,CAAC,oBAAoB,CAAC,sBAAsB,CAAC;;KAEtD,CAAC;QACJ,CAAC,CAAC;QAEe,oBAAe,GAAG,GAAG,EAAE;YACtC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC;UAC3C,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE;UACvF,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC;;KAE/C,CAAC;QACJ,CAAC,CAAC;IAyGJ,CAAC;IA/JC,MAAM,KAAK,MAAM;QACf,OAAO;YACL,KAAK,CAAC,MAAM;YACZ,WAAW;YACX,GAAG;;;;;;;;;;;;;OAcF;SACF,CAAC;IACJ,CAAC;IAoCD,MAAM;;QACJ,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAEhC,IAAI,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,IAAI,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,CAAA,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;YACvE,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YAEpF,OAAO,IAAI,CAAA;;;;sBAIK,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;;;;;sBAOf,YAAY;qBACb,IAAI,CAAC,IAAI;oBACV,EAAE,IAAI,YAAA,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,0CAAE,SAAS,mCAAI,EAAE;;;;;OAKtE,CAAC;SACH;QAED,MAAM,IAAI,eAAG,IAAK,CAAC,OAAO,0CAAE,WAAW,qCAAM,SAAS,CAAC;QACvD,MAAM,IAAI,SAAG,KAAK,CAAC,IAA0B,CAAC,mCAAI,KAAK,CAAC,OAAO,CAAC;QAChE,MAAM,WAAW,SAAG,IAAK,CAAC,gBAAgB,0CAAE,SAAS,CAAC,IAAK,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAEzF,OAAO,IAAI,CAAA;;;;;;;;eAQA,IAAI;aACN,EAAE;;gBAEC,IAAI,CAAC,mBAAmB;;;;gEAIwB,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;wGAEyB,IAAI;;;oBAGxF,QAAQ,CAAC;YACf,kBAAkB,EAAE,IAAI;YACxB,iBAAiB,EAAE,IAAI,CAAC,gBAAgB,KAAK,eAAe,CAAC,KAAK;YAClE,aAAa,EAAE,IAAI,CAAC,gBAAgB,KAAK,eAAe,CAAC,IAAI;SAC9D,CAAC;;cAEA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE;+CACzC,IAAI;;;;;gBAKnC,IAAK,CAAC,YAAY,IAAI,IAAI,CAAC,WAAW;YACtC,CAAC,CAAC,IAAI,CAAA;4CACsB,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE;4BAC5C,IAAK,CAAC,YAAY,MAAM,IAAK,CAAC,WAAW;mBAClD;YACH,CAAC,CAAC,EAAE;;;;gBAIJ,WAAW;YACX,CAAC,CAAC,IAAI,CAAA;4CACsB,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,QAAQ,EAAE;;4BAElD,WAAW;mBACpB;YACH,CAAC,CAAC,EAAE;;;;;KAKf,CAAC;IACJ,CAAC;IAES,KAAK,CAAC,WAAW;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QAChD,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACxD,MAAM,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEjD,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACxE,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,cAAc,CAAC,GAAU;QAC/B,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACzD,OAAiC,CAAC,IAAI,CAAC,GAAG,CAAC,aAA4B,CAAC,CAAC;IAC5E,CAAC;IAEO,mBAAmB,CAAC,GAAoB;QAC9C,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IAC3C,CAAC;CACF","sourcesContent":["import * as logos from './logos';\n\nimport { CSSResultArray, css } from 'lit-element';\nimport { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/index';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { backgrounds } from './backgrounds';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'payment-method-card';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Basic card displaying a payment method.\n *\n * @slot actions:before - **new in v1.4.0**\n * @slot actions:after - **new in v1.4.0**\n * @slot actions:delete:before - **new in v1.4.0**\n * @slot actions:delete:after - **new in v1.4.0**\n *\n * @element foxy-payment-method-form\n * @since 1.2.0\n */\nexport class PaymentMethodCard extends Base<Data> {\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      backgrounds,\n      css`\n        .ratio-card {\n          padding-top: 63%;\n          position: relative;\n          height: 0;\n        }\n\n        .ratio-card > * {\n          position: absolute;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          left: 0;\n        }\n      `,\n    ];\n  }\n\n  templates: Templates = {};\n\n  private readonly __renderActionsDelete = () => {\n    return html`\n      <div class=\"flex\">\n        ${this.renderTemplateOrSlot('actions:delete:before')}\n\n        <vaadin-button\n          class=\"px-xs rounded\"\n          theme=\"icon\"\n          style=\"--lumo-primary-text-color: #fff; --lumo-primary-color-50pct: rgba(255, 255, 255, 0.5); --lumo-contrast-5pct: rgba(255, 255, 255, 0.05)\"\n          aria-label=${this.t('delete').toString()}\n          data-testid=\"actions:delete\"\n          ?disabled=${this.disabledSelector.matches('actions:delete', true)}\n          @click=${this.__handleDelete}\n        >\n          <iron-icon icon=\"icons:delete\"></iron-icon>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('actions:delete:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderActions = () => {\n    return html`\n      <div class=\"flex\" data-testid=\"actions\">\n        ${this.renderTemplateOrSlot('actions:before')}\n        ${this.hiddenSelector.matches('actions:delete', true) ? '' : this.__renderActionsDelete()}\n        ${this.renderTemplateOrSlot('actions:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const { data, lang, ns } = this;\n\n    if (this.in({ idle: 'template' }) || !data?.save_cc || !this.in('idle')) {\n      const spinnerState = this.in('fail') ? 'error' : this.in('busy') ? 'busy' : 'empty';\n\n      return html`\n        <div\n          class=\"ratio-card\"\n          aria-live=\"polite\"\n          aria-busy=${this.in('busy')}\n          data-testid=\"wrapper\"\n        >\n          <div class=\"h-full bg-contrast-5\"></div>\n          <div class=\"absolute inset-0 flex items-center justify-center\">\n            <foxy-spinner\n              data-testid=\"spinner\"\n              state=${spinnerState}\n              lang=${this.lang}\n              ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n            >\n            </foxy-spinner>\n          </div>\n        </div>\n      `;\n    }\n\n    const type = data!.cc_type?.toLowerCase() ?? 'unknown';\n    const logo = logos[type as keyof typeof logos] ?? logos.unknown;\n    const last4Digits = data!.cc_number_masked?.substring(data!.cc_number_masked.length - 4);\n\n    return html`\n      <foxy-internal-confirm-dialog\n        data-testid=\"confirm\"\n        message=\"delete_prompt\"\n        confirm=\"delete\"\n        cancel=\"cancel\"\n        header=\"delete\"\n        theme=\"primary error\"\n        lang=${lang}\n        ns=${ns}\n        id=\"confirm\"\n        @hide=${this.__handleConfirmHide}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div class=\"ratio-card\" data-testid=\"wrapper\" aria-busy=${this.in('busy')} aria-live=\"polite\">\n        <div\n          class=\"flex flex-col justify-between text-base text-m leading-m font-lumo p-m bg-unknown bg-${type}\"\n        >\n          <div\n            class=${classMap({\n              'flex items-start': true,\n              'justify-between': this.readonlyControls === BooleanSelector.False,\n              'justify-end': this.readonlyControls === BooleanSelector.True,\n            })}\n          >\n            ${this.hiddenSelector.matches('actions', true) ? '' : this.__renderActions()}\n            <div class=\"ml-auto rounded h-m\">${logo}</div>\n          </div>\n\n          <div class=\"font-tnum leading-none flex justify-between\">\n            <div data-testid=\"expiry\">\n              ${data!.cc_exp_month && data.cc_exp_year\n                ? html`\n                    <span class=\"sr-only\">${this.t('expires').toString()}&nbsp;</span>\n                    <span>${data!.cc_exp_month} / ${data!.cc_exp_year}</span>\n                  `\n                : ''}\n            </div>\n\n            <div data-testid=\"number\">\n              ${last4Digits\n                ? html`\n                    <span class=\"sr-only\">${this.t('last_4_digits').toString()}&nbsp;</span>\n                    <span aria-hidden=\"true\">••••</span>\n                    <span>${last4Digits}</span>\n                  `\n                : ''}\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  protected async _sendDelete(): Promise<null> {\n    const body = JSON.stringify({ save_cc: false });\n    await this._fetch(this.href, { method: 'PATCH', body });\n    const rumour = NucleonElement.Rumour(this.group);\n\n    rumour.share({ data: null, source: this.href, related: [this.parent] });\n    return null;\n  }\n\n  private __handleDelete(evt: Event) {\n    const confirm = this.renderRoot.querySelector('#confirm');\n    (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n  }\n\n  private __handleConfirmHide(evt: DialogHideEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n}\n"]}
+{"version":3,"file":"PaymentMethodCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentMethodCard/PaymentMethodCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations } from 'lit-element';\nimport type { Data, Templates } from './types';\nimport type { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport type { TemplateResult } from 'lit-html';\nimport type { FormDialog } from '../FormDialog/FormDialog';\n\nimport * as logos from './logos';\n\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { NucleonElement } from '../NucleonElement/index';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { backgrounds } from './backgrounds';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { css, html } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'payment-method-card';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Basic card displaying a payment method.\n *\n * @slot actions:before - **new in v1.4.0**\n * @slot actions:after - **new in v1.4.0**\n * @slot actions:delete:before - **new in v1.4.0**\n * @slot actions:delete:after - **new in v1.4.0**\n * @slot actions:update:before - **new in v1.27.0**\n * @slot actions:update:after - **new in v1.27.0**\n *\n * @element foxy-payment-method-card\n * @since 1.2.0\n */\nexport class PaymentMethodCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      embedUrl: { attribute: 'embed-url' },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      backgrounds,\n      css`\n        .ratio-card {\n          padding-top: 63%;\n          position: relative;\n          height: 0;\n        }\n\n        .ratio-card > * {\n          position: absolute;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          left: 0;\n        }\n      `,\n    ];\n  }\n\n  templates: Templates = {};\n\n  /**\n   * Configuration URL for the Payment Card Embed. If provided,\n   * the card will have an option of updating payment method.\n   * Otherwise, only the delete option will be available.\n   */\n  embedUrl: string | null = null;\n\n  private readonly __renderActionsUpdate = () => {\n    const hasCC = !!this.data?.save_cc;\n    const buttonStyle = hasCC\n      ? '--lumo-primary-text-color: #fff; --lumo-primary-color-50pct: rgba(255, 255, 255, 0.5); --lumo-contrast-5pct: rgba(255, 255, 255, 0.05)'\n      : void 0;\n\n    return html`\n      <div class=\"flex\">\n        ${this.renderTemplateOrSlot('actions:update:before')}\n\n        <foxy-form-dialog\n          data-testid=\"update-dialog\"\n          readonlycontrols=${this.readonlySelector.zoom('actions:update:form')}\n          disabledcontrols=${this.disabledSelector.zoom('actions:update:form')}\n          hiddencontrols=\"status ${this.hiddenSelector.zoom('actions:update:form')}\"\n          header=${hasCC ? 'dialog_header_update' : 'dialog_header_add'}\n          group=${this.group}\n          form=\"foxy-update-payment-method-form\"\n          href=${this.href}\n          lang=${this.lang}\n          ns=\"${this.ns} dialog\"\n          alert\n          close-on-patch\n          .props=${{ '.embedUrl': this.embedUrl }}\n        >\n        </foxy-form-dialog>\n\n        <vaadin-button\n          class=${ifDefined(hasCC ? 'px-xs rounded' : void 0)}\n          theme=${hasCC ? 'icon' : 'contrast small'}\n          style=${ifDefined(buttonStyle)}\n          aria-label=${this.t(hasCC ? 'update' : 'add')}\n          data-testid=\"actions:update\"\n          ?disabled=${this.disabledSelector.matches('actions:update', true)}\n          @click=${(evt: CustomEvent) => {\n            const button = evt.currentTarget as HTMLElement;\n            const dialog = button.previousElementSibling as FormDialog;\n            dialog.show(button);\n          }}\n        >\n          ${hasCC\n            ? html`<iron-icon icon=\"icons:create\"></iron-icon>`\n            : html`<foxy-i18n infer=\"\" key=\"add\"></foxy-i18n>`}\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('actions:update:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderActionsDelete = () => {\n    return html`\n      <div class=\"flex\">\n        ${this.renderTemplateOrSlot('actions:delete:before')}\n\n        <vaadin-button\n          class=\"px-xs rounded\"\n          theme=\"icon\"\n          style=\"--lumo-primary-text-color: #fff; --lumo-primary-color-50pct: rgba(255, 255, 255, 0.5); --lumo-contrast-5pct: rgba(255, 255, 255, 0.05)\"\n          aria-label=${this.t('delete').toString()}\n          data-testid=\"actions:delete\"\n          ?disabled=${this.disabledSelector.matches('actions:delete', true)}\n          @click=${this.__handleDelete}\n        >\n          <iron-icon icon=\"icons:delete\"></iron-icon>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('actions:delete:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderActions = () => {\n    const isUpdateHidden = this.hiddenSelector.matches('actions:update', true) || !this.embedUrl;\n    const isDeleteHidden = this.hiddenSelector.matches('actions:delete', true);\n\n    return html`\n      <div class=\"flex gap-s\" data-testid=\"actions\">\n        ${this.renderTemplateOrSlot('actions:before')}\n        ${isUpdateHidden ? '' : this.__renderActionsUpdate()}\n        ${isDeleteHidden ? '' : this.__renderActionsDelete()}\n        ${this.renderTemplateOrSlot('actions:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const { data, lang, ns } = this;\n\n    if (this.in({ idle: 'template' }) || !data?.save_cc || !this.in('idle')) {\n      const spinnerState = this.in('fail') ? 'error' : this.in('busy') ? 'busy' : 'empty';\n      const isUpdateHidden =\n        this.hiddenSelector.matches('actions:update', true) || !this.embedUrl || !this.data;\n\n      return html`\n        <div\n          class=\"ratio-card\"\n          aria-live=\"polite\"\n          aria-busy=${this.in('busy')}\n          data-testid=\"wrapper\"\n        >\n          <div class=\"h-full bg-contrast-5\"></div>\n          <div class=\"absolute inset-0 flex flex-col gap-m items-center justify-center\">\n            <foxy-spinner\n              data-testid=\"spinner\"\n              layout=\"vertical\"\n              state=${spinnerState}\n              lang=${this.lang}\n              ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n            >\n            </foxy-spinner>\n            ${isUpdateHidden ? '' : this.__renderActionsUpdate()}\n          </div>\n        </div>\n      `;\n    }\n\n    const type = data!.cc_type?.toLowerCase() ?? 'unknown';\n    const logo = logos[type as keyof typeof logos] ?? logos.unknown;\n    const last4Digits = data!.cc_number_masked?.substring(data!.cc_number_masked.length - 4);\n\n    return html`\n      <foxy-internal-confirm-dialog\n        data-testid=\"confirm\"\n        message=\"delete_prompt\"\n        confirm=\"delete\"\n        cancel=\"cancel\"\n        header=\"delete\"\n        theme=\"primary error\"\n        lang=${lang}\n        ns=${ns}\n        id=\"confirm\"\n        @hide=${this.__handleConfirmHide}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div class=\"ratio-card\" data-testid=\"wrapper\" aria-busy=${this.in('busy')} aria-live=\"polite\">\n        <div\n          class=\"flex flex-col justify-between text-base text-m leading-m font-lumo p-m bg-unknown bg-${type}\"\n        >\n          <div\n            class=${classMap({\n              'flex items-start': true,\n              'justify-between': this.readonlyControls === BooleanSelector.False,\n              'justify-end': this.readonlyControls === BooleanSelector.True,\n            })}\n          >\n            <div class=\"mr-auto rounded h-m\">${logo}</div>\n            ${this.hiddenSelector.matches('actions', true) ? '' : this.__renderActions()}\n          </div>\n\n          <div class=\"font-tnum leading-none flex justify-between\" style=\"color: white\">\n            <div data-testid=\"expiry\">\n              ${data!.cc_exp_month && data.cc_exp_year\n                ? html`\n                    <span class=\"sr-only\">${this.t('expires').toString()}&nbsp;</span>\n                    <span>${data!.cc_exp_month} / ${data!.cc_exp_year}</span>\n                  `\n                : ''}\n            </div>\n\n            <div data-testid=\"number\">\n              ${last4Digits\n                ? html`\n                    <span class=\"sr-only\">${this.t('last_4_digits').toString()}&nbsp;</span>\n                    <span aria-hidden=\"true\">••••</span>\n                    <span>${last4Digits}</span>\n                  `\n                : ''}\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  protected async _sendDelete(): Promise<null> {\n    const body = JSON.stringify({ save_cc: false });\n    await this._fetch(this.href, { method: 'PATCH', body });\n    const rumour = NucleonElement.Rumour(this.group);\n\n    rumour.share({ data: null, source: this.href, related: [this.parent] });\n    return null;\n  }\n\n  private __handleDelete(evt: Event) {\n    const confirm = this.renderRoot.querySelector('#confirm');\n    (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n  }\n\n  private __handleConfirmHide(evt: DialogHideEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n}\n"]}

package/dist/elements/public/PaymentMethodCard/index.d.ts

@@ -3,6 +3,8 @@ import '@polymer/iron-icons';
 import '@vaadin/vaadin-button';
 import '../../internal/InternalConfirmDialog/index';
 import '../../internal/InternalSandbox/index';
+import '../UpdatePaymentMethodForm/index';
+import '../FormDialog/index';
 import '../Spinner/index';
 import '../I18n/index';
 import { PaymentMethodCard } from './PaymentMethodCard';

package/dist/elements/public/PaymentMethodCard/index.js

@@ -3,6 +3,8 @@ import '@polymer/iron-icons';
 import '@vaadin/vaadin-button';
 import "../../internal/InternalConfirmDialog/index.js";
 import "../../internal/InternalSandbox/index.js";
+import "../UpdatePaymentMethodForm/index.js";
+import "../FormDialog/index.js";
 import "../Spinner/index.js";
 import "../I18n/index.js";
 import { PaymentMethodCard } from "./PaymentMethodCard.js";

package/dist/elements/public/PaymentMethodCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentMethodCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAC/B,uDAAoD;AACpD,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,iBAAiB,EAAE,+BAA4B;AAExD,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,iBAAiB,CAAC,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import '@polymer/iron-icon';\nimport '@polymer/iron-icons';\nimport '@vaadin/vaadin-button';\nimport '../../internal/InternalConfirmDialog/index';\nimport '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { PaymentMethodCard } from './PaymentMethodCard';\n\ncustomElements.define('foxy-payment-method-card', PaymentMethodCard);\n\nexport { PaymentMethodCard };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentMethodCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAC/B,uDAAoD;AACpD,iDAA8C;AAC9C,6CAA0C;AAC1C,gCAA6B;AAC7B,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,iBAAiB,EAAE,+BAA4B;AAExD,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,iBAAiB,CAAC,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import '@polymer/iron-icon';\nimport '@polymer/iron-icons';\nimport '@vaadin/vaadin-button';\nimport '../../internal/InternalConfirmDialog/index';\nimport '../../internal/InternalSandbox/index';\nimport '../UpdatePaymentMethodForm/index';\nimport '../FormDialog/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { PaymentMethodCard } from './PaymentMethodCard';\n\ncustomElements.define('foxy-payment-method-card', PaymentMethodCard);\n\nexport { PaymentMethodCard };\n"]}