@foxy.io/elements 1.27.1 → 1.28.0-beta.1

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentsApiFraudProtectionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiFraudProtectionCard/PaymentsApiFraudProtectionCard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,oCAAoC,CAAC;AAChD,MAAM,IAAI,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AAEhD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,8BAA+B,SAAQ,IAAU;IAA9D;;QAYE;;;WAGG;QACH,gBAAW,GAAsC,IAAI,CAAC;IA6BxD,CAAC;IA5CC,MAAM,KAAK,eAAe;QACxB,OAAO,uuBAAuuB,CAAC;IACjvB,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,WAAW,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAClC,CAAC;IACJ,CAAC;IAQD,UAAU;;QACR,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC;YACrC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YACxC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,EAAE;SAC5C,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,OAAO,aAAa,CAAC;QAEzD,MAAM,UAAU,GAAG,8BAA8B,CAAC,eAAe,CAAC;QAClE,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,OAAO,IAAI,CAAA;;;;;;;gBAOC,MAAA,CAAC,IAAI,CAAC,CAAC,OAAC,IAAI,CAAC,WAAW,+CAAhB,IAAI,EAAe,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,mCAAI,UAAU;gBAC3D,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC;mBAChB,CAAC,GAAU,EAAE,EAAE,CAAC,CAAE,GAAG,CAAC,aAAkC,CAAC,GAAG,GAAG,UAAU,CAAC;;;6CAGhD,aAAa;;KAErD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\nimport { html } from 'lit-html';\n\nconst NS = 'payments-api-fraud-protection-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/**\n * Card element representing a `fx:fraud_protection` resource of Payments API.\n *\n * _Payments API is a client-side virtual API layer built on top of hAPI\n * in an attempt to streamline access to stores' payment method settings\n * that is currently a bit quirky due to the legacy functionality. To use\n * this element with hAPI, wrap it into a foxy-payments-api node._\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @element foxy-payments-api-fraud-protection-card\n * @since 1.21.0\n */\nexport class PaymentsApiFraudProtectionCard extends Base<Data> {\n  static get defaultImageSrc(): string {\n    return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 44 44'%3E%3Cpath fill='%23fff' d='M0 20.73v-9.9L10.83 0h9.9L0 20.73ZM0 0h9.41L0 9.41V0Zm0 22.14L22.14 0h9.9l-9.43 9.44-.61-.27-10.5 4.66v7-.29L0 32.04v-9.9Zm11.54-.23L0 33.46v9.9l14.14-14.14a15 15 0 0 1-2.6-7.3Zm3.2 8.12L.77 44h9.9l9.7-9.7a13.75 13.75 0 0 1-5.63-4.27Zm6.67 4.64L12.08 44h9.9L44 21.98v-9.9L32.16 23.92C31.01 29.15 27.05 33.6 22 34.83l-.59-.16Zm11.02-12.43L44 10.67V.77L31.42 13.35l1.08.48v7a13 13 0 0 1-.07 1.4Zm-1.99-9.32L43.35 0h-9.9l-9.87 9.87 6.86 3.05ZM23.4 44 44 23.4v9.9L33.3 44h-9.9Zm11.31 0L44 34.71V44h-9.29Z'/%3E%3Cpath fill='%23fff' d='M30.17 21.99H22V11.72l-8.17 3.63V22H22v10.42c4.34-1.34 7.55-5.63 8.17-10.43Z'/%3E%3C/svg%3E\";\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      getImageSrc: { attribute: false },\n    };\n  }\n\n  /**\n   * Fraud protection image/logo URL getter.\n   * If left `null`, the card will display the default image.\n   */\n  getImageSrc: ((type: string) => string) | null = null;\n\n  renderBody(): TemplateResult {\n    const defaultLayout = super.renderBody({\n      title: data => html`${data.helper.name}`,\n      subtitle: data => html`${data.description}`,\n    });\n\n    if (!this.in({ idle: 'snapshot' })) return defaultLayout;\n\n    const defaultSrc = PaymentsApiFraudProtectionCard.defaultImageSrc;\n    const data = this.data;\n\n    return html`\n      <figure\n        class=\"flex items-center\"\n        style=\"gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <img\n          class=\"relative h-s w-s object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n          src=${(data ? this.getImageSrc?.(data.type) : null) ?? defaultSrc}\n          alt=${this.t('image_alt')}\n          @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n        />\n\n        <figcaption class=\"min-w-0 flex-1\">${defaultLayout}</figcaption>\n      </figure>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"PaymentsApiFraudProtectionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiFraudProtectionCard/PaymentsApiFraudProtectionCard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,oCAAoC,CAAC;AAChD,MAAM,IAAI,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AAEhD;;;;;;;;;;GAUG;AACH,MAAM,OAAO,8BAA+B,SAAQ,IAAU;IAA9D;;QAYE;;;WAGG;QACH,gBAAW,GAAsC,IAAI,CAAC;IA6BxD,CAAC;IA5CC,MAAM,KAAK,eAAe;QACxB,OAAO,uuBAAuuB,CAAC;IACjvB,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,WAAW,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAClC,CAAC;IACJ,CAAC;IAQD,UAAU;;QACR,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC;YACrC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YACxC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,EAAE;SAC5C,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,OAAO,aAAa,CAAC;QAEzD,MAAM,UAAU,GAAG,8BAA8B,CAAC,eAAe,CAAC;QAClE,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,OAAO,IAAI,CAAA;;;;;;;gBAOC,MAAA,CAAC,IAAI,CAAC,CAAC,OAAC,IAAI,CAAC,WAAW,+CAAhB,IAAI,EAAe,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,mCAAI,UAAU;gBAC3D,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC;mBAChB,CAAC,GAAU,EAAE,EAAE,CAAC,CAAE,GAAG,CAAC,aAAkC,CAAC,GAAG,GAAG,UAAU,CAAC;;;6CAGhD,aAAa;;KAErD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\nimport { html } from 'lit-html';\n\nconst NS = 'payments-api-fraud-protection-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/**\n * Card element representing a `fx:fraud_protection` resource of Payments API.\n *\n * _Payments API is a client-side virtual API layer built on top of hAPI\n * in an attempt to streamline access to stores' payment method settings\n * that is currently a bit quirky due to the legacy functionality. To use\n * this element with hAPI, wrap it into a foxy-payments-api node._\n *\n * @element foxy-payments-api-fraud-protection-card\n * @since 1.21.0\n */\nexport class PaymentsApiFraudProtectionCard extends Base<Data> {\n  static get defaultImageSrc(): string {\n    return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 44 44'%3E%3Cpath fill='%23fff' d='M0 20.73v-9.9L10.83 0h9.9L0 20.73ZM0 0h9.41L0 9.41V0Zm0 22.14L22.14 0h9.9l-9.43 9.44-.61-.27-10.5 4.66v7-.29L0 32.04v-9.9Zm11.54-.23L0 33.46v9.9l14.14-14.14a15 15 0 0 1-2.6-7.3Zm3.2 8.12L.77 44h9.9l9.7-9.7a13.75 13.75 0 0 1-5.63-4.27Zm6.67 4.64L12.08 44h9.9L44 21.98v-9.9L32.16 23.92C31.01 29.15 27.05 33.6 22 34.83l-.59-.16Zm11.02-12.43L44 10.67V.77L31.42 13.35l1.08.48v7a13 13 0 0 1-.07 1.4Zm-1.99-9.32L43.35 0h-9.9l-9.87 9.87 6.86 3.05ZM23.4 44 44 23.4v9.9L33.3 44h-9.9Zm11.31 0L44 34.71V44h-9.29Z'/%3E%3Cpath fill='%23fff' d='M30.17 21.99H22V11.72l-8.17 3.63V22H22v10.42c4.34-1.34 7.55-5.63 8.17-10.43Z'/%3E%3C/svg%3E\";\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      getImageSrc: { attribute: false },\n    };\n  }\n\n  /**\n   * Fraud protection image/logo URL getter.\n   * If left `null`, the card will display the default image.\n   */\n  getImageSrc: ((type: string) => string) | null = null;\n\n  renderBody(): TemplateResult {\n    const defaultLayout = super.renderBody({\n      title: data => html`${data.helper.name}`,\n      subtitle: data => html`${data.description}`,\n    });\n\n    if (!this.in({ idle: 'snapshot' })) return defaultLayout;\n\n    const defaultSrc = PaymentsApiFraudProtectionCard.defaultImageSrc;\n    const data = this.data;\n\n    return html`\n      <figure\n        class=\"flex items-center\"\n        style=\"gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <img\n          class=\"relative h-s w-s object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n          src=${(data ? this.getImageSrc?.(data.type) : null) ?? defaultSrc}\n          alt=${this.t('image_alt')}\n          @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n        />\n\n        <figcaption class=\"min-w-0 flex-1\">${defaultLayout}</figcaption>\n      </figure>\n    `;\n  }\n}\n"]}

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

@@ -1,7 +1,8 @@
-import type { Templates, Data } from './types';
+import type { Data } from './types';
 import type { PropertyDeclarations } from 'lit-element';
 import type { TemplateResult } from 'lit-html';
 import type { NucleonV8N } from '../NucleonElement/types';
+import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
@@ -14,24 +15,6 @@ declare const Base: typeof InternalForm & import("lit-element").Constructor<impo
  * that is currently a bit quirky due to the legacy functionality. To use
  * this element with hAPI, wrap it into a foxy-payments-api node._
  *
- * @slot description:before
- * @slot description:after
- *
- * @slot score-threshold-reject:before
- * @slot score-threshold-reject:after
- *
- * @slot json-[field-name-in-kebab-case]:before
- * @slot json-[field-name-in-kebab-case]:after
- *
- * @slot timestamps:before
- * @slot timestamps:after
- *
- * @slot create:before
- * @slot create:after
- *
- * @slot delete:before
- * @slot delete:after
- *
  * @element foxy-payments-api-fraud-protection-form
  * @since 1.21.0
  */
@@ -41,14 +24,17 @@ export declare class PaymentsApiFraudProtectionForm extends Base<Data> {
     static get v8n(): NucleonV8N<Data>;
     /** A function that returns a URL of a fraud protection icon based on the given type. */
     getImageSrc: ((type: string) => string) | null;
-    /** Template render functions mapped to their name. */
-    templates: Templates;
     private readonly __availableFraudProtectionsLoaderId;
+    get hiddenSelector(): BooleanSelector;
+    get headerTitleOptions(): Record<string, unknown>;
+    get headerSubtitleOptions(): Record<string, unknown>;
+    renderHeader(...params: Parameters<InternalForm<Data>['renderHeader']>): TemplateResult;
     renderBody(): TemplateResult;
     private get __availableFraudProtectionsLoader();
     private get __availableFraudProtectionsHref();
     private get __availableFraudProtections();
     private __renderFraudProtectionSelector;
+    private __renderFraudProtectionButton;
     private __renderFraudProtectionConfig;
     private __renderBlock;
 }

package/dist/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.js

@@ -1,4 +1,5 @@
 import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { html } from 'lit-html';
@@ -15,24 +16,6 @@ const Base = TranslatableMixin(InternalForm, NS);
  * that is currently a bit quirky due to the legacy functionality. To use
  * this element with hAPI, wrap it into a foxy-payments-api node._
  *
- * @slot description:before
- * @slot description:after
- *
- * @slot score-threshold-reject:before
- * @slot score-threshold-reject:after
- *
- * @slot json-[field-name-in-kebab-case]:before
- * @slot json-[field-name-in-kebab-case]:after
- *
- * @slot timestamps:before
- * @slot timestamps:after
- *
- * @slot create:before
- * @slot create:after
- *
- * @slot delete:before
- * @slot delete:after
- *
  * @element foxy-payments-api-fraud-protection-form
  * @since 1.21.0
  */
@@ -41,8 +24,6 @@ export class PaymentsApiFraudProtectionForm extends Base {
         super(...arguments);
         /** A function that returns a URL of a fraud protection icon based on the given type. */
         this.getImageSrc = null;
-        /** Template render functions mapped to their name. */
-        this.templates = {};
         this.__availableFraudProtectionsLoaderId = 'availableFraudProtections';
     }
     static get defaultImageSrc() {
@@ -88,9 +69,38 @@ export class PaymentsApiFraudProtectionForm extends Base {
             },
         ];
     }
+    get hiddenSelector() {
+        return new BooleanSelector(`header:copy-json ${super.hiddenSelector}`.trimEnd());
+    }
+    get headerTitleOptions() {
+        var _a;
+        return { ...this.data, context: (_a = this.form.type) !== null && _a !== void 0 ? _a : 'new' };
+    }
+    get headerSubtitleOptions() {
+        return { id: this.headerCopyIdValue };
+    }
+    renderHeader(...params) {
+        var _a;
+        return html `
+      <div>
+        ${super.renderHeader(...params)}
+        ${((_a = this.data) === null || _a === void 0 ? void 0 : _a.type) || !this.form.type
+            ? html ``
+            : html `
+              <vaadin-button
+                data-testid="select-another-button"
+                theme="tertiary-inline"
+                @click=${() => this.undo()}
+              >
+                <foxy-i18n infer="" key="select_another_button_label"></foxy-i18n>
+              </vaadin-button>
+            `}
+      </div>
+    `;
+    }
     renderBody() {
         return this.form.type
-            ? this.__renderFraudProtectionConfig(this.form.type)
+            ? this.__renderFraudProtectionConfig()
             : this.__renderFraudProtectionSelector();
     }
     get __availableFraudProtectionsLoader() {
@@ -114,8 +124,15 @@ export class PaymentsApiFraudProtectionForm extends Base {
     }
     __renderFraudProtectionSelector() {
         var _a;
-        const defaultSrc = PaymentsApiFraudProtectionForm.defaultImageSrc;
         return html `
+      ${this.renderHeader()}
+
+      <div class="grid grid-cols-2 gap-m" data-testid="select-protection-list">
+        ${Object.entries((_a = this.__availableFraudProtections) !== null && _a !== void 0 ? _a : {}).map(([type, helper]) => {
+            return this.__renderFraudProtectionButton({ type, helper });
+        })}
+      </div>
+
       <foxy-nucleon
         class="hidden"
         infer=""
@@ -124,80 +141,53 @@ export class PaymentsApiFraudProtectionForm extends Base {
         @update=${() => this.requestUpdate()}
       >
       </foxy-nucleon>
-
-      <foxy-i18n
-        class="block text-xxl font-medium border-b border-contrast-10 pb-m"
-        infer=""
-        key="select_protection_title"
-      >
-      </foxy-i18n>
-
-      <div data-testid="select-protection-list">
-        <ul class="-my-s grid grid-cols-1">
-          ${Object.entries((_a = this.__availableFraudProtections) !== null && _a !== void 0 ? _a : {}).map(([type, helper]) => {
-            var _a, _b;
-            return html `
-              <li class="-mx-s">
-                <button
-                  class="w-full block text-left hover-bg-contrast-5 p-s rounded"
-                  @click=${() => this.edit({ type: type, helper })}
-                >
-                  <figure class="flex items-center gap-m h-m">
-                    <img
-                      class="relative h-m w-m object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs"
-                      src=${(_b = (_a = this.getImageSrc) === null || _a === void 0 ? void 0 : _a.call(this, type)) !== null && _b !== void 0 ? _b : defaultSrc}
-                      alt=""
-                      @error=${(evt) => {
-                evt.currentTarget.src = defaultSrc;
-            }}
-                    />
-
-                    <figcaption class="min-w-0 flex-1 truncate leading-s font-medium">
-                      ${helper.name}&ZeroWidthSpace;
-                    </figcaption>
-                  </figure>
-                </button>
-              </li>
-            `;
-        })}
-        </ul>
-      </div>
     `;
     }
-    __renderFraudProtectionConfig(type) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+    __renderFraudProtectionButton({ type, helper }) {
+        var _a, _b;
         const defaultSrc = PaymentsApiFraudProtectionForm.defaultImageSrc;
+        const src = (_b = (_a = this.getImageSrc) === null || _a === void 0 ? void 0 : _a.call(this, type)) !== null && _b !== void 0 ? _b : defaultSrc;
+        const onError = (evt) => (evt.currentTarget.src = defaultSrc);
         return html `
-      <figure data-testid="logo" class="relative flex flex-col gap-m p-m items-center">
+      <button
+        class="relative w-full block text-left p-s rounded bg-contrast-5 overflow-hidden transition-colors hover-bg-contrast-10 focus-outline-none focus-ring-2 focus-ring-primary-50"
+        @click=${() => this.edit({ type, helper })}
+      >
         <img
-          class="relative h-xl w-xl object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs"
-          src=${(_b = (_a = this.getImageSrc) === null || _a === void 0 ? void 0 : _a.call(this, type)) !== null && _b !== void 0 ? _b : defaultSrc}
+          class="absolute top-0 left-0 w-1-2 h-full object-cover bg-center filter saturate-200 blur-3xl"
+          style="transform: translate3d(0, 0, 0)"
+          src=${src}
           alt=""
-          @error=${(evt) => (evt.currentTarget.src = defaultSrc)}
+          @error=${onError}
         />
 
-        <figcaption class="relative min-w-0 font-medium text-xl text-center">
-          ${(_d = (_c = this.form.helper) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : this.form.type}&ZeroWidthSpace;
-        </figcaption>
-      </figure>
+        <figure class="relative flex flex-col gap-m">
+          <img
+            class="h-m w-m object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs"
+            src=${src}
+            alt=""
+            @error=${onError}
+          />
 
+          <figcaption class="min-w-0 flex-1 truncate leading-s">
+            <div class="font-medium">${helper.name}&ZeroWidthSpace;</div>
+            <div class="text-xs text-secondary">${type}</div>
+          </figcaption>
+        </figure>
+      </button>
+    `;
+    }
+    __renderFraudProtectionConfig() {
+        var _a, _b, _c;
+        return html `
+      ${this.renderHeader()}
       <foxy-internal-text-control infer="description"></foxy-internal-text-control>
-      ${((_e = this.form.helper) === null || _e === void 0 ? void 0 : _e.uses_rejection_threshold) ? html `
+      ${((_a = this.form.helper) === null || _a === void 0 ? void 0 : _a.uses_rejection_threshold) ? html `
             <foxy-internal-integer-control infer="score-threshold-reject">
             </foxy-internal-integer-control>
           `
             : ''}
-      ${(_g = (_f = this.form.helper) === null || _f === void 0 ? void 0 : _f.json) === null || _g === void 0 ? void 0 : _g.blocks.map(block => this.__renderBlock(block))}
-      ${((_h = this.data) === null || _h === void 0 ? void 0 : _h.type) ? ''
-            : html `
-            <vaadin-button
-              data-testid="select-another-button"
-              theme="contrast"
-              @click=${() => this.undo()}
-            >
-              <foxy-i18n infer="" key="select_another_button_label"></foxy-i18n>
-            </vaadin-button>
-          `}
+      ${(_c = (_b = this.form.helper) === null || _b === void 0 ? void 0 : _b.json) === null || _c === void 0 ? void 0 : _c.blocks.map(block => this.__renderBlock(block))}
       ${super.renderBody()}
     `;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentsApiFraudProtectionForm.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { AvailableFraudProtections } from '../PaymentsApi/api/types';\nimport type { Templates, Block, Data } from './types';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nimport get from 'lodash-es/get';\nimport set from 'lodash-es/set';\nimport has from 'lodash-es/has';\n\nconst NS = 'payments-api-fraud-protection-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Form element for the `fx:fraud_protection` resource of Payments API.\n *\n * _Payments API is a client-side virtual API layer built on top of hAPI\n * in an attempt to streamline access to stores' payment method settings\n * that is currently a bit quirky due to the legacy functionality. To use\n * this element with hAPI, wrap it into a foxy-payments-api node._\n *\n * @slot description:before\n * @slot description:after\n *\n * @slot score-threshold-reject:before\n * @slot score-threshold-reject:after\n *\n * @slot json-[field-name-in-kebab-case]:before\n * @slot json-[field-name-in-kebab-case]:after\n *\n * @slot timestamps:before\n * @slot timestamps:after\n *\n * @slot create:before\n * @slot create:after\n *\n * @slot delete:before\n * @slot delete:after\n *\n * @element foxy-payments-api-fraud-protection-form\n * @since 1.21.0\n */\nexport class PaymentsApiFraudProtectionForm extends Base<Data> {\n  static get defaultImageSrc(): string {\n    return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 44 44'%3E%3Cpath fill='%23fff' d='M0 20.73v-9.9L10.83 0h9.9L0 20.73ZM0 0h9.41L0 9.41V0Zm0 22.14L22.14 0h9.9l-9.43 9.44-.61-.27-10.5 4.66v7-.29L0 32.04v-9.9Zm11.54-.23L0 33.46v9.9l14.14-14.14a15 15 0 0 1-2.6-7.3Zm3.2 8.12L.77 44h9.9l9.7-9.7a13.75 13.75 0 0 1-5.63-4.27Zm6.67 4.64L12.08 44h9.9L44 21.98v-9.9L32.16 23.92C31.01 29.15 27.05 33.6 22 34.83l-.59-.16Zm11.02-12.43L44 10.67V.77L31.42 13.35l1.08.48v7a13 13 0 0 1-.07 1.4Zm-1.99-9.32L43.35 0h-9.9l-9.87 9.87 6.86 3.05ZM23.4 44 44 23.4v9.9L33.3 44h-9.9Zm11.31 0L44 34.71V44h-9.29Z'/%3E%3Cpath fill='%23fff' d='M30.17 21.99H22V11.72l-8.17 3.63V22H22v10.42c4.34-1.34 7.55-5.63 8.17-10.43Z'/%3E%3C/svg%3E\";\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      getImageSrc: { attribute: false },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ description: v }) => !v || v.length <= 100 || 'description:v8n_too_long',\n\n      ({ type: v }) => !!v || 'type:v8n_required',\n\n      ({ score_threshold_reject: v }) => {\n        if (typeof v !== 'number') return true;\n        return (v <= 100 && v >= 0) || 'score-threshold-reject:v8n_out_of_range';\n      },\n\n      form => {\n        const blocks = form.helper?.json?.blocks ?? [];\n        let json: Record<string, unknown>;\n\n        try {\n          json = JSON.parse(form.json ?? '{}');\n        } catch {\n          json = {};\n        }\n\n        for (const block of blocks) {\n          for (const field of block.fields) {\n            if ('optional' in (field as Record<string, unknown>)) {\n              if (!(field as Record<string, unknown>).optional) {\n                const path = [block.parent_id, block.id, field.id].filter(v => !!v);\n                if (!has(json, path) && field.type !== 'checkbox') return 'json:v8n_invalid';\n              }\n            }\n          }\n        }\n\n        return true;\n      },\n    ];\n  }\n\n  /** A function that returns a URL of a fraud protection icon based on the given type. */\n  getImageSrc: ((type: string) => string) | null = null;\n\n  /** Template render functions mapped to their name. */\n  templates: Templates = {};\n\n  private readonly __availableFraudProtectionsLoaderId = 'availableFraudProtections';\n\n  renderBody(): TemplateResult {\n    return this.form.type\n      ? this.__renderFraudProtectionConfig(this.form.type)\n      : this.__renderFraudProtectionSelector();\n  }\n\n  private get __availableFraudProtectionsLoader() {\n    type Loader = NucleonElement<AvailableFraudProtections>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__availableFraudProtectionsLoaderId}`);\n  }\n\n  private get __availableFraudProtectionsHref() {\n    try {\n      const presetIdRegex = /\\/payment_presets\\/(?<presetId>.+)\\//;\n      const pathname = new URL(this.href || this.parent).pathname;\n      const presetId = presetIdRegex.exec(pathname)!.groups!.presetId;\n      const url = new URL(\n        `/payment_presets/${presetId}/available_fraud_protections`,\n        this.href || this.parent\n      );\n\n      return url.toString();\n    } catch {\n      // ignore\n    }\n  }\n\n  private get __availableFraudProtections() {\n    return this.__availableFraudProtectionsLoader?.data?.values;\n  }\n\n  private __renderFraudProtectionSelector() {\n    const defaultSrc = PaymentsApiFraudProtectionForm.defaultImageSrc;\n\n    return html`\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__availableFraudProtectionsHref)}\n        id=${this.__availableFraudProtectionsLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-i18n\n        class=\"block text-xxl font-medium border-b border-contrast-10 pb-m\"\n        infer=\"\"\n        key=\"select_protection_title\"\n      >\n      </foxy-i18n>\n\n      <div data-testid=\"select-protection-list\">\n        <ul class=\"-my-s grid grid-cols-1\">\n          ${Object.entries(this.__availableFraudProtections ?? {}).map(([type, helper]) => {\n            return html`\n              <li class=\"-mx-s\">\n                <button\n                  class=\"w-full block text-left hover-bg-contrast-5 p-s rounded\"\n                  @click=${() => this.edit({ type: type as Data['type'], helper })}\n                >\n                  <figure class=\"flex items-center gap-m h-m\">\n                    <img\n                      class=\"relative h-m w-m object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n                      src=${this.getImageSrc?.(type) ?? defaultSrc}\n                      alt=\"\"\n                      @error=${(evt: Event) => {\n                        (evt.currentTarget as HTMLImageElement).src = defaultSrc;\n                      }}\n                    />\n\n                    <figcaption class=\"min-w-0 flex-1 truncate leading-s font-medium\">\n                      ${helper.name}&ZeroWidthSpace;\n                    </figcaption>\n                  </figure>\n                </button>\n              </li>\n            `;\n          })}\n        </ul>\n      </div>\n    `;\n  }\n\n  private __renderFraudProtectionConfig(type: string) {\n    const defaultSrc = PaymentsApiFraudProtectionForm.defaultImageSrc;\n\n    return html`\n      <figure data-testid=\"logo\" class=\"relative flex flex-col gap-m p-m items-center\">\n        <img\n          class=\"relative h-xl w-xl object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n          src=${this.getImageSrc?.(type) ?? defaultSrc}\n          alt=\"\"\n          @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n        />\n\n        <figcaption class=\"relative min-w-0 font-medium text-xl text-center\">\n          ${this.form.helper?.name ?? this.form.type}&ZeroWidthSpace;\n        </figcaption>\n      </figure>\n\n      <foxy-internal-text-control infer=\"description\"></foxy-internal-text-control>\n      ${this.form.helper?.uses_rejection_threshold\n        ? html`\n            <foxy-internal-integer-control infer=\"score-threshold-reject\">\n            </foxy-internal-integer-control>\n          `\n        : ''}\n      ${this.form.helper?.json?.blocks.map(block => this.__renderBlock(block))}\n      ${this.data?.type\n        ? ''\n        : html`\n            <vaadin-button\n              data-testid=\"select-another-button\"\n              theme=\"contrast\"\n              @click=${() => this.undo()}\n            >\n              <foxy-i18n infer=\"\" key=\"select_another_button_label\"></foxy-i18n>\n            </vaadin-button>\n          `}\n      ${super.renderBody()}\n    `;\n  }\n\n  private __renderBlock(block: Block) {\n    return html`${block.fields.map(field => {\n      const getValue = () => {\n        let config: any;\n\n        try {\n          config = JSON.parse(this.form.json ?? '');\n        } catch {\n          config = {};\n        }\n\n        const path = [block.parent_id, block.id, field.id].filter(v => !!v);\n        return get(config, path) ?? config.default_value;\n      };\n\n      const setValue = (newValue: unknown) => {\n        let config: any;\n\n        try {\n          config = JSON.parse(this.form.json ?? '');\n        } catch {\n          config = {};\n        }\n\n        const path = [block.parent_id, block.id, field.id].filter(v => !!v);\n        this.edit({ json: JSON.stringify(set(config, path, newValue)) });\n      };\n\n      type Option = { name: string; value: string };\n      const options = (field as { options?: Option[] }).options;\n      const path = [block.parent_id, block.id, field.id].filter(v => !!v);\n      const scope = ['json', ...path].join('-').replace(/_/g, '-');\n\n      return html`\n        ${field.type === 'checkbox'\n          ? html`\n              <foxy-internal-checkbox-group-control\n                helper-text=${field.description ?? ''}\n                label=\"\"\n                infer=${scope}\n                .options=${[{ label: field.name, value: 'checked' }]}\n                .getValue=${() => (getValue() ? ['checked'] : [])}\n                .setValue=${(newValue: string[]) => setValue(newValue.includes('checked'))}\n              >\n              </foxy-internal-checkbox-group-control>\n            `\n          : field.type === 'select'\n          ? html`\n              <foxy-internal-select-control\n                helper-text=${field.description ?? ''}\n                placeholder=${field.options?.find(o => o.value === field.default_value)?.name ??\n                this.t('default_additional_field_placeholder')}\n                label=${field.name}\n                infer=${scope}\n                .options=${options!.map(({ name, value }) => ({ label: name, value }))}\n                .getValue=${getValue}\n                .setValue=${setValue}\n              >\n              </foxy-internal-select-control>\n            `\n          : html`\n              <foxy-internal-text-control\n                helper-text=${field.description ?? ''}\n                placeholder=${field.default_value || this.t('default_additional_field_placeholder')}\n                label=${field.name}\n                infer=${scope}\n                .getValue=${getValue}\n                .setValue=${setValue}\n              >\n              </foxy-internal-text-control>\n            `}\n      `;\n    })}`;\n  }\n}\n"]}
+{"version":3,"file":"PaymentsApiFraudProtectionForm.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { AvailableFraudProtections, FraudProtection } from '../PaymentsApi/api/types';\nimport type { Block, Data } from './types';\nimport type { PropertyDeclarations } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nimport get from 'lodash-es/get';\nimport set from 'lodash-es/set';\nimport has from 'lodash-es/has';\n\nconst NS = 'payments-api-fraud-protection-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Form element for the `fx:fraud_protection` resource of Payments API.\n *\n * _Payments API is a client-side virtual API layer built on top of hAPI\n * in an attempt to streamline access to stores' payment method settings\n * that is currently a bit quirky due to the legacy functionality. To use\n * this element with hAPI, wrap it into a foxy-payments-api node._\n *\n * @element foxy-payments-api-fraud-protection-form\n * @since 1.21.0\n */\nexport class PaymentsApiFraudProtectionForm extends Base<Data> {\n  static get defaultImageSrc(): string {\n    return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 44 44'%3E%3Cpath fill='%23fff' d='M0 20.73v-9.9L10.83 0h9.9L0 20.73ZM0 0h9.41L0 9.41V0Zm0 22.14L22.14 0h9.9l-9.43 9.44-.61-.27-10.5 4.66v7-.29L0 32.04v-9.9Zm11.54-.23L0 33.46v9.9l14.14-14.14a15 15 0 0 1-2.6-7.3Zm3.2 8.12L.77 44h9.9l9.7-9.7a13.75 13.75 0 0 1-5.63-4.27Zm6.67 4.64L12.08 44h9.9L44 21.98v-9.9L32.16 23.92C31.01 29.15 27.05 33.6 22 34.83l-.59-.16Zm11.02-12.43L44 10.67V.77L31.42 13.35l1.08.48v7a13 13 0 0 1-.07 1.4Zm-1.99-9.32L43.35 0h-9.9l-9.87 9.87 6.86 3.05ZM23.4 44 44 23.4v9.9L33.3 44h-9.9Zm11.31 0L44 34.71V44h-9.29Z'/%3E%3Cpath fill='%23fff' d='M30.17 21.99H22V11.72l-8.17 3.63V22H22v10.42c4.34-1.34 7.55-5.63 8.17-10.43Z'/%3E%3C/svg%3E\";\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      getImageSrc: { attribute: false },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ description: v }) => !v || v.length <= 100 || 'description:v8n_too_long',\n\n      ({ type: v }) => !!v || 'type:v8n_required',\n\n      ({ score_threshold_reject: v }) => {\n        if (typeof v !== 'number') return true;\n        return (v <= 100 && v >= 0) || 'score-threshold-reject:v8n_out_of_range';\n      },\n\n      form => {\n        const blocks = form.helper?.json?.blocks ?? [];\n        let json: Record<string, unknown>;\n\n        try {\n          json = JSON.parse(form.json ?? '{}');\n        } catch {\n          json = {};\n        }\n\n        for (const block of blocks) {\n          for (const field of block.fields) {\n            if ('optional' in (field as Record<string, unknown>)) {\n              if (!(field as Record<string, unknown>).optional) {\n                const path = [block.parent_id, block.id, field.id].filter(v => !!v);\n                if (!has(json, path) && field.type !== 'checkbox') return 'json:v8n_invalid';\n              }\n            }\n          }\n        }\n\n        return true;\n      },\n    ];\n  }\n\n  /** A function that returns a URL of a fraud protection icon based on the given type. */\n  getImageSrc: ((type: string) => string) | null = null;\n\n  private readonly __availableFraudProtectionsLoaderId = 'availableFraudProtections';\n\n  get hiddenSelector(): BooleanSelector {\n    return new BooleanSelector(`header:copy-json ${super.hiddenSelector}`.trimEnd());\n  }\n\n  get headerTitleOptions(): Record<string, unknown> {\n    return { ...this.data, context: this.form.type ?? 'new' };\n  }\n\n  get headerSubtitleOptions(): Record<string, unknown> {\n    return { id: this.headerCopyIdValue };\n  }\n\n  renderHeader(...params: Parameters<InternalForm<Data>['renderHeader']>): TemplateResult {\n    return html`\n      <div>\n        ${super.renderHeader(...params)}\n        ${this.data?.type || !this.form.type\n          ? html``\n          : html`\n              <vaadin-button\n                data-testid=\"select-another-button\"\n                theme=\"tertiary-inline\"\n                @click=${() => this.undo()}\n              >\n                <foxy-i18n infer=\"\" key=\"select_another_button_label\"></foxy-i18n>\n              </vaadin-button>\n            `}\n      </div>\n    `;\n  }\n\n  renderBody(): TemplateResult {\n    return this.form.type\n      ? this.__renderFraudProtectionConfig()\n      : this.__renderFraudProtectionSelector();\n  }\n\n  private get __availableFraudProtectionsLoader() {\n    type Loader = NucleonElement<AvailableFraudProtections>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__availableFraudProtectionsLoaderId}`);\n  }\n\n  private get __availableFraudProtectionsHref() {\n    try {\n      const presetIdRegex = /\\/payment_presets\\/(?<presetId>.+)\\//;\n      const pathname = new URL(this.href || this.parent).pathname;\n      const presetId = presetIdRegex.exec(pathname)!.groups!.presetId;\n      const url = new URL(\n        `/payment_presets/${presetId}/available_fraud_protections`,\n        this.href || this.parent\n      );\n\n      return url.toString();\n    } catch {\n      // ignore\n    }\n  }\n\n  private get __availableFraudProtections() {\n    return this.__availableFraudProtectionsLoader?.data?.values;\n  }\n\n  private __renderFraudProtectionSelector() {\n    return html`\n      ${this.renderHeader()}\n\n      <div class=\"grid grid-cols-2 gap-m\" data-testid=\"select-protection-list\">\n        ${Object.entries(this.__availableFraudProtections ?? {}).map(([type, helper]) => {\n          return this.__renderFraudProtectionButton({ type, helper } as FraudProtection);\n        })}\n      </div>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__availableFraudProtectionsHref)}\n        id=${this.__availableFraudProtectionsLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n    `;\n  }\n\n  private __renderFraudProtectionButton({ type, helper }: FraudProtection) {\n    const defaultSrc = PaymentsApiFraudProtectionForm.defaultImageSrc;\n    const src = this.getImageSrc?.(type) ?? defaultSrc;\n    const onError = (evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc);\n\n    return html`\n      <button\n        class=\"relative w-full block text-left p-s rounded bg-contrast-5 overflow-hidden transition-colors hover-bg-contrast-10 focus-outline-none focus-ring-2 focus-ring-primary-50\"\n        @click=${() => this.edit({ type, helper })}\n      >\n        <img\n          class=\"absolute top-0 left-0 w-1-2 h-full object-cover bg-center filter saturate-200 blur-3xl\"\n          style=\"transform: translate3d(0, 0, 0)\"\n          src=${src}\n          alt=\"\"\n          @error=${onError}\n        />\n\n        <figure class=\"relative flex flex-col gap-m\">\n          <img\n            class=\"h-m w-m object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n            src=${src}\n            alt=\"\"\n            @error=${onError}\n          />\n\n          <figcaption class=\"min-w-0 flex-1 truncate leading-s\">\n            <div class=\"font-medium\">${helper.name}&ZeroWidthSpace;</div>\n            <div class=\"text-xs text-secondary\">${type}</div>\n          </figcaption>\n        </figure>\n      </button>\n    `;\n  }\n\n  private __renderFraudProtectionConfig() {\n    return html`\n      ${this.renderHeader()}\n      <foxy-internal-text-control infer=\"description\"></foxy-internal-text-control>\n      ${this.form.helper?.uses_rejection_threshold\n        ? html`\n            <foxy-internal-integer-control infer=\"score-threshold-reject\">\n            </foxy-internal-integer-control>\n          `\n        : ''}\n      ${this.form.helper?.json?.blocks.map(block => this.__renderBlock(block))}\n      ${super.renderBody()}\n    `;\n  }\n\n  private __renderBlock(block: Block) {\n    return html`${block.fields.map(field => {\n      const getValue = () => {\n        let config: any;\n\n        try {\n          config = JSON.parse(this.form.json ?? '');\n        } catch {\n          config = {};\n        }\n\n        const path = [block.parent_id, block.id, field.id].filter(v => !!v);\n        return get(config, path) ?? config.default_value;\n      };\n\n      const setValue = (newValue: unknown) => {\n        let config: any;\n\n        try {\n          config = JSON.parse(this.form.json ?? '');\n        } catch {\n          config = {};\n        }\n\n        const path = [block.parent_id, block.id, field.id].filter(v => !!v);\n        this.edit({ json: JSON.stringify(set(config, path, newValue)) });\n      };\n\n      type Option = { name: string; value: string };\n      const options = (field as { options?: Option[] }).options;\n      const path = [block.parent_id, block.id, field.id].filter(v => !!v);\n      const scope = ['json', ...path].join('-').replace(/_/g, '-');\n\n      return html`\n        ${field.type === 'checkbox'\n          ? html`\n              <foxy-internal-checkbox-group-control\n                helper-text=${field.description ?? ''}\n                label=\"\"\n                infer=${scope}\n                .options=${[{ label: field.name, value: 'checked' }]}\n                .getValue=${() => (getValue() ? ['checked'] : [])}\n                .setValue=${(newValue: string[]) => setValue(newValue.includes('checked'))}\n              >\n              </foxy-internal-checkbox-group-control>\n            `\n          : field.type === 'select'\n          ? html`\n              <foxy-internal-select-control\n                helper-text=${field.description ?? ''}\n                placeholder=${field.options?.find(o => o.value === field.default_value)?.name ??\n                this.t('default_additional_field_placeholder')}\n                label=${field.name}\n                infer=${scope}\n                .options=${options!.map(({ name, value }) => ({ label: name, value }))}\n                .getValue=${getValue}\n                .setValue=${setValue}\n              >\n              </foxy-internal-select-control>\n            `\n          : html`\n              <foxy-internal-text-control\n                helper-text=${field.description ?? ''}\n                placeholder=${field.default_value || this.t('default_additional_field_placeholder')}\n                label=${field.name}\n                infer=${scope}\n                .getValue=${getValue}\n                .setValue=${setValue}\n              >\n              </foxy-internal-text-control>\n            `}\n      `;\n    })}`;\n  }\n}\n"]}

package/dist/elements/public/PaymentsApiFraudProtectionForm/types.d.ts

@@ -1,18 +1,3 @@
-import type { PaymentsApiFraudProtectionForm } from './PaymentsApiFraudProtectionForm';
 import type { FraudProtection } from '../PaymentsApi/api/types';
-import type { Renderer } from '../../../mixins/configurable';
 export declare type Data = FraudProtection;
 export declare type Block = NonNullable<Data['helper']['json']>['blocks'][number];
-export declare type Templates = {
-    'description:before'?: Renderer<PaymentsApiFraudProtectionForm>;
-    'description:after'?: Renderer<PaymentsApiFraudProtectionForm>;
-    'score-threshold-reject:before'?: Renderer<PaymentsApiFraudProtectionForm>;
-    'score-threshold-reject:after'?: Renderer<PaymentsApiFraudProtectionForm>;
-    'timestamps:before'?: Renderer<PaymentsApiFraudProtectionForm>;
-    'timestamps:after'?: Renderer<PaymentsApiFraudProtectionForm>;
-    'create:before'?: Renderer<PaymentsApiFraudProtectionForm>;
-    'create:after'?: Renderer<PaymentsApiFraudProtectionForm>;
-    'delete:before'?: Renderer<PaymentsApiFraudProtectionForm>;
-    'delete:after'?: Renderer<PaymentsApiFraudProtectionForm>;
-    [key: string]: Renderer<PaymentsApiFraudProtectionForm> | undefined;
-};

package/dist/elements/public/PaymentsApiFraudProtectionForm/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiFraudProtectionForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { PaymentsApiFraudProtectionForm } from './PaymentsApiFraudProtectionForm';\nimport type { FraudProtection } from '../PaymentsApi/api/types';\nimport type { Renderer } from '../../../mixins/configurable';\n\nexport type Data = FraudProtection;\nexport type Block = NonNullable<Data['helper']['json']>['blocks'][number];\nexport type Templates = {\n  'description:before'?: Renderer<PaymentsApiFraudProtectionForm>;\n  'description:after'?: Renderer<PaymentsApiFraudProtectionForm>;\n  'score-threshold-reject:before'?: Renderer<PaymentsApiFraudProtectionForm>;\n  'score-threshold-reject:after'?: Renderer<PaymentsApiFraudProtectionForm>;\n  'timestamps:before'?: Renderer<PaymentsApiFraudProtectionForm>;\n  'timestamps:after'?: Renderer<PaymentsApiFraudProtectionForm>;\n  'create:before'?: Renderer<PaymentsApiFraudProtectionForm>;\n  'create:after'?: Renderer<PaymentsApiFraudProtectionForm>;\n  'delete:before'?: Renderer<PaymentsApiFraudProtectionForm>;\n  'delete:after'?: Renderer<PaymentsApiFraudProtectionForm>;\n\n  [key: string]: Renderer<PaymentsApiFraudProtectionForm> | undefined;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiFraudProtectionForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { FraudProtection } from '../PaymentsApi/api/types';\n\nexport type Data = FraudProtection;\nexport type Block = NonNullable<Data['helper']['json']>['blocks'][number];\n"]}

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

@@ -13,12 +13,6 @@ declare const Base: typeof TwoLineCard & import("lit-element").Constructor<impor
  * that is currently a bit quirky due to the legacy functionality. To use
  * this element with hAPI, wrap it into a foxy-payments-api node._
  *
- * @slot title:before
- * @slot title:after
- *
- * @slot subtitle:before
- * @slot subtitle:after
- *
  * @element foxy-payments-api-payment-method-card
  * @since 1.21.0
  */

package/dist/elements/public/PaymentsApiPaymentMethodCard/PaymentsApiPaymentMethodCard.js

@@ -11,12 +11,6 @@ const Base = TranslatableMixin(TwoLineCard, NS);
  * that is currently a bit quirky due to the legacy functionality. To use
  * this element with hAPI, wrap it into a foxy-payments-api node._
  *
- * @slot title:before
- * @slot title:after
- *
- * @slot subtitle:before
- * @slot subtitle:after
- *
  * @element foxy-payments-api-payment-method-card
  * @since 1.21.0
  */

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentsApiPaymentMethodCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodCard/PaymentsApiPaymentMethodCard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,kCAAkC,CAAC;AAC9C,MAAM,IAAI,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AAEhD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,4BAA6B,SAAQ,IAAU;IAA5D;;QAYE;;;WAGG;QACH,gBAAW,GAAsC,IAAI,CAAC;IA6BxD,CAAC;IA5CC,MAAM,KAAK,eAAe;QACxB,OAAO,goBAAgoB,CAAC;IAC1oB,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,WAAW,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAClC,CAAC;IACJ,CAAC;IAQD,UAAU;;QACR,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC;YACrC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YACxC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,EAAE;SAC5C,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,OAAO,aAAa,CAAC;QAEzD,MAAM,UAAU,GAAG,4BAA4B,CAAC,eAAe,CAAC;QAChE,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,OAAO,IAAI,CAAA;;;;;;;gBAOC,MAAA,CAAC,IAAI,CAAC,CAAC,OAAC,IAAI,CAAC,WAAW,+CAAhB,IAAI,EAAe,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,mCAAI,UAAU;gBAC3D,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC;mBAChB,CAAC,GAAU,EAAE,EAAE,CAAC,CAAE,GAAG,CAAC,aAAkC,CAAC,GAAG,GAAG,UAAU,CAAC;;;6CAGhD,aAAa;;KAErD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\nimport { html } from 'lit-html';\n\nconst NS = 'payments-api-payment-method-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/**\n * Card element representing a `fx:payment_method` resource of Payments API.\n *\n * _Payments API is a client-side virtual API layer built on top of hAPI\n * in an attempt to streamline access to stores' payment method settings\n * that is currently a bit quirky due to the legacy functionality. To use\n * this element with hAPI, wrap it into a foxy-payments-api node._\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @element foxy-payments-api-payment-method-card\n * @since 1.21.0\n */\nexport class PaymentsApiPaymentMethodCard extends Base<Data> {\n  static get defaultImageSrc(): string {\n    return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 44 44'%3E%3Cpath fill='%23fff' d='m29.3 14 14-14H32.1l-14 14h11.2Zm2.7 9.9 12-12V.7L30.62 14.1A2 2 0 0 1 32 16v7.9ZM13.31 44h11.18L44 24.5V13.3l-12 12V28a2 2 0 0 1-2 2h-2.69l-14 14Zm-1.41 0H.7l14-14h11.2l-14 14Zm14 0h11.2l6.9-6.9V25.9L25.9 44Zm12.6 0H44v-5.5L38.5 44Z'/%3E%3Cpath fill='%23fff' d='M30 28H14v-6h16v6Zm0-10v-2H14v2h16ZM0 43.3l13.4-13.4A2 2 0 0 1 12 28v-7.9L0 32.12V43.3Z'/%3E%3Cpath fill='%23fff' d='M16.7 14H14c-1.11 0-1.99.89-1.99 2v2.7L0 30.7V19.52L19.52 0H30.7l-14 14Zm1.4-14H6.92L0 6.92V18.1L18.1 0ZM5.5 0H0v5.5L5.5 0Z'/%3E%3C/svg%3E\";\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      getImageSrc: { attribute: false },\n    };\n  }\n\n  /**\n   * Payment method image/logo URL getter.\n   * If left `null`, the card will display the default image.\n   */\n  getImageSrc: ((type: string) => string) | null = null;\n\n  renderBody(): TemplateResult {\n    const defaultLayout = super.renderBody({\n      title: data => html`${data.helper.name}`,\n      subtitle: data => html`${data.description}`,\n    });\n\n    if (!this.in({ idle: 'snapshot' })) return defaultLayout;\n\n    const defaultSrc = PaymentsApiPaymentMethodCard.defaultImageSrc;\n    const data = this.data;\n\n    return html`\n      <figure\n        class=\"flex items-center\"\n        style=\"gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <img\n          class=\"relative h-s w-s object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n          src=${(data ? this.getImageSrc?.(data.type) : null) ?? defaultSrc}\n          alt=${this.t('image_alt')}\n          @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n        />\n\n        <figcaption class=\"min-w-0 flex-1\">${defaultLayout}</figcaption>\n      </figure>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"PaymentsApiPaymentMethodCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodCard/PaymentsApiPaymentMethodCard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,kCAAkC,CAAC;AAC9C,MAAM,IAAI,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AAEhD;;;;;;;;;;GAUG;AACH,MAAM,OAAO,4BAA6B,SAAQ,IAAU;IAA5D;;QAYE;;;WAGG;QACH,gBAAW,GAAsC,IAAI,CAAC;IA6BxD,CAAC;IA5CC,MAAM,KAAK,eAAe;QACxB,OAAO,goBAAgoB,CAAC;IAC1oB,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,WAAW,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAClC,CAAC;IACJ,CAAC;IAQD,UAAU;;QACR,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC;YACrC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YACxC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,EAAE;SAC5C,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,OAAO,aAAa,CAAC;QAEzD,MAAM,UAAU,GAAG,4BAA4B,CAAC,eAAe,CAAC;QAChE,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,OAAO,IAAI,CAAA;;;;;;;gBAOC,MAAA,CAAC,IAAI,CAAC,CAAC,OAAC,IAAI,CAAC,WAAW,+CAAhB,IAAI,EAAe,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,mCAAI,UAAU;gBAC3D,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC;mBAChB,CAAC,GAAU,EAAE,EAAE,CAAC,CAAE,GAAG,CAAC,aAAkC,CAAC,GAAG,GAAG,UAAU,CAAC;;;6CAGhD,aAAa;;KAErD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\nimport { html } from 'lit-html';\n\nconst NS = 'payments-api-payment-method-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/**\n * Card element representing a `fx:payment_method` resource of Payments API.\n *\n * _Payments API is a client-side virtual API layer built on top of hAPI\n * in an attempt to streamline access to stores' payment method settings\n * that is currently a bit quirky due to the legacy functionality. To use\n * this element with hAPI, wrap it into a foxy-payments-api node._\n *\n * @element foxy-payments-api-payment-method-card\n * @since 1.21.0\n */\nexport class PaymentsApiPaymentMethodCard extends Base<Data> {\n  static get defaultImageSrc(): string {\n    return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 44 44'%3E%3Cpath fill='%23fff' d='m29.3 14 14-14H32.1l-14 14h11.2Zm2.7 9.9 12-12V.7L30.62 14.1A2 2 0 0 1 32 16v7.9ZM13.31 44h11.18L44 24.5V13.3l-12 12V28a2 2 0 0 1-2 2h-2.69l-14 14Zm-1.41 0H.7l14-14h11.2l-14 14Zm14 0h11.2l6.9-6.9V25.9L25.9 44Zm12.6 0H44v-5.5L38.5 44Z'/%3E%3Cpath fill='%23fff' d='M30 28H14v-6h16v6Zm0-10v-2H14v2h16ZM0 43.3l13.4-13.4A2 2 0 0 1 12 28v-7.9L0 32.12V43.3Z'/%3E%3Cpath fill='%23fff' d='M16.7 14H14c-1.11 0-1.99.89-1.99 2v2.7L0 30.7V19.52L19.52 0H30.7l-14 14Zm1.4-14H6.92L0 6.92V18.1L18.1 0ZM5.5 0H0v5.5L5.5 0Z'/%3E%3C/svg%3E\";\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      getImageSrc: { attribute: false },\n    };\n  }\n\n  /**\n   * Payment method image/logo URL getter.\n   * If left `null`, the card will display the default image.\n   */\n  getImageSrc: ((type: string) => string) | null = null;\n\n  renderBody(): TemplateResult {\n    const defaultLayout = super.renderBody({\n      title: data => html`${data.helper.name}`,\n      subtitle: data => html`${data.description}`,\n    });\n\n    if (!this.in({ idle: 'snapshot' })) return defaultLayout;\n\n    const defaultSrc = PaymentsApiPaymentMethodCard.defaultImageSrc;\n    const data = this.data;\n\n    return html`\n      <figure\n        class=\"flex items-center\"\n        style=\"gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <img\n          class=\"relative h-s w-s object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n          src=${(data ? this.getImageSrc?.(data.type) : null) ?? defaultSrc}\n          alt=${this.t('image_alt')}\n          @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n        />\n\n        <figcaption class=\"min-w-0 flex-1\">${defaultLayout}</figcaption>\n      </figure>\n    `;\n  }\n}\n"]}

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

@@ -1,7 +1,8 @@
-import type { Templates, Data } from './types';
+import type { Data } from './types';
 import type { PropertyDeclarations } from 'lit-element';
 import type { TemplateResult } from 'lit-html';
 import type { NucleonV8N } from '../NucleonElement/types';
+import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
@@ -14,45 +15,6 @@ declare const Base: typeof InternalForm & import("lit-element").Constructor<impo
  * that is currently a bit quirky due to the legacy functionality. To use
  * this element with hAPI, wrap it into a foxy-payments-api node._
  *
- * @slot description:before
- * @slot description:after
- *
- * @slot account-id:before
- * @slot account-id:after
- *
- * @slot account-key:before
- * @slot account-key:after
- *
- * @slot third-party-key:before
- * @slot third-party-key:after
- *
- * @slot test-account-id:before
- * @slot test-account-id:after
- *
- * @slot test-account-key:before
- * @slot test-account-key:after
- *
- * @slot test-third-party-key:before
- * @slot test-third-party-key:after
- *
- * @slot additional-fields-[field-name-in-kebab-case]:before
- * @slot additional-fields-[field-name-in-kebab-case]:after
- *
- * @slot three-d-secure-toggle:before
- * @slot three-d-secure-toggle:after
- *
- * @slot three-d-secure-response:before
- * @slot three-d-secure-response:after
- *
- * @slot timestamps:before
- * @slot timestamps:after
- *
- * @slot create:before
- * @slot create:after
- *
- * @slot delete:before
- * @slot delete:after
- *
  * @element foxy-payments-api-payment-method-form
  * @since 1.21.0
  */
@@ -62,8 +24,6 @@ export declare class PaymentsApiPaymentMethodForm extends Base<Data> {
     static get v8n(): NucleonV8N<Data>;
     /** A function that returns a URL of a payment method icon based on the given type. */
     getImageSrc: ((type: string) => string) | null;
-    /** Template render functions mapped to their name. */
-    templates: Templates;
     private readonly __availablePaymentMethodsLoaderId;
     private readonly __threeDSecureResponseGetValue;
     private readonly __threeDSecureResponseSetValue;
@@ -72,6 +32,11 @@ export declare class PaymentsApiPaymentMethodForm extends Base<Data> {
     private readonly __threeDSecureToggleSetValue;
     private readonly __threeDSecureToggleOptions;
     private __tab;
+    get hiddenSelector(): BooleanSelector;
+    renderHeader(...params: Parameters<InternalForm<Data>['renderHeader']>): TemplateResult;
+    get headerTitleOptions(): Record<string, unknown>;
+    get headerSubtitleOptions(): Record<string, unknown>;
+    get headerCopyIdValue(): string | number;
     renderBody(): TemplateResult;
     private get __groupedAvailablePaymentMethods();
     private get __availablePaymentMethodsLoader();