npm - @foxy.io/elements - Versions diffs - 1.18.0-beta.21 → 1.18.0-beta.22 - Mend

@foxy.io/elements 1.18.0-beta.21 → 1.18.0-beta.22

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

Files changed (284) hide show

package/dist/elements/public/ItemOptionCard/ItemOptionCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ItemOptionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemOptionCard/ItemOptionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'item-option-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/*\n Basic card displaying an item option.\n \n @slot title:before\n * @slot title:after\n \n @slot subtitle:before\n * @slot subtitle:after\n \n @element foxy-item-option-card\n * @since 1.17.0\n */\nexport class ItemOptionCard extends Base<Data> {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n localeCodes: { type: String, attribute: 'locale-codes' },\n };\n }\n\n localeCodes: string \| null = null;\n\n private readonly __transactionTemplateLoaderId = 'transactionTemplateLoader';\n\n private readonly __defaultTemplateSetLoaderId = 'defaultTemplateSetLoader';\n\n private readonly __localeCodesHelperLoaderId = 'localeCodesLoader';\n\n private readonly __transactionLoaderId = 'transactionLoader';\n\n private readonly __templateSetLoaderId = 'templateSetLoader';\n\n private readonly __storeLoaderId = 'storeLoader';\n\n private readonly __cartLoaderId = 'cartLoader';\n\n render(): TemplateResult {\n const currencyDisplay = this.__store?.use_international_currency_symbol ? 'code' : 'symbol';\n const transaction = this.__transaction;\n\n let currencyCode: string \| null = null;\n\n if (transaction) {\n currencyCode = transaction.currency_code;\n } else {\n const cart = this.__cart ?? this.__transactionTemplate;\n\n if (cart && 'currency_code' in cart) {\n // TODO: remove the directive below once the SDK is updated\n // @ts-expect-error SDK types are incomplete\n currencyCode = cart.currency_code;\n } else {\n const allLocaleCodes = this.__localeCodesHelper;\n const localeCode = (this.__templateSet ?? this.__defaultTemplateSet)?.locale_code;\n const localeInfo = localeCode ? allLocaleCodes?.values[localeCode] : void 0;\n\n if (localeInfo) currencyCode = /Currency: ([A-Z]{3})/g.exec(localeInfo)?.[1] ?? null;\n }\n }\n\n return html`\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__transactionTemplateHref)}\n id=${this.__transactionTemplateLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__defaultTemplateSetHref)}\n id=${this.__defaultTemplateSetLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__localeCodesHelperHref)}\n id=${this.__localeCodesHelperLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__transactionHref)}\n id=${this.__transactionLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__templateSetHref)}\n id=${this.__templateSetLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__storeHref)}\n id=${this.__storeLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__cartHref)}\n id=${this.__cartLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n ${super.render({\n title: data => {\n if (!currencyCode \|\| !currencyDisplay) return html`&ZeroWidthSpace;`;\n\n let priceMod: string;\n\n try {\n priceMod = Math.abs(data.price_mod).toLocaleString(this.lang \|\| 'en', {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n currencyDisplay: currencyDisplay,\n currency: currencyCode,\n style: 'currency',\n });\n } catch {\n priceMod = '--';\n }\n\n return html`${data.name} • ${priceMod} • ${data.weight_mod}`;\n },\n subtitle: data => html`${data.value}`,\n })}\n `;\n }\n\n private get __transactionTemplateHref() {\n try {\n const links = this.data?._links as Partial<Record<string, { href: string }>> \| undefined;\n const url = new URL(links?.['fx:subscription']?.href ?? '');\n url.searchParams.set('zoom', 'transaction_template');\n return url.toString();\n } catch {\n //\n }\n }\n\n private get __defaultTemplateSetHref() {\n const templateSetUri = (this.__cart ?? this.__transactionTemplate)?.template_set_uri;\n\n if (templateSetUri === '') {\n try {\n const url = new URL(this.__store?._links['fx:template_sets'].href ?? '');\n url.searchParams.set('code', 'DEFAULT');\n return url.toString();\n } catch {\n //\n }\n }\n }\n\n private get __localeCodesHelperHref() {\n if (this.__defaultTemplateSetHref \|\| this.__templateSetHref) {\n return this.localeCodes ?? void 0;\n }\n }\n\n private get __transactionHref() {\n return this.data?._links['fx:transaction']?.href;\n }\n\n private get __templateSetHref() {\n const cart = this.__cart ?? this.__transactionTemplate;\n // TODO: remove the directive below once SDK is updated\n // @ts-expect-error SDK types are incomplete\n const currencyCode = cart?.currency_code as string \| undefined;\n\n if (!currencyCode) return cart?.template_set_uri \|\| void 0;\n }\n\n private get __storeHref() {\n return this.data?._links['fx:store']?.href;\n }\n\n private get __cartHref() {\n const links = this.data?._links as Partial<Record<string, { href: string }>> \| undefined;\n return links?.['fx:cart']?.href;\n }\n\n private get __transactionTemplate() {\n type Loader = NucleonElement<Resource<Rels.Subscription, { zoom: 'transaction_template' }>>;\n const selector = `#${this.__transactionTemplateLoaderId}`;\n const loader = this.renderRoot.querySelector<Loader>(selector);\n return loader?.data?._embedded['fx:transaction_template'] ?? null;\n }\n\n private get __defaultTemplateSet() {\n type Loader = NucleonElement<Resource<Rels.TemplateSets>>;\n const selector = `#${this.__defaultTemplateSetLoaderId}`;\n const loader = this.renderRoot.querySelector<Loader>(selector);\n return loader?.data?._embedded['fx:template_sets'][0] ?? null;\n }\n\n private get __localeCodesHelper() {\n type Loader = NucleonElement<Resource<Rels.LocaleCodes>>;\n const selector = `#${this.__localeCodesHelperLoaderId}`;\n return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n }\n\n private get __transaction() {\n type Loader = NucleonElement<Resource<Rels.Transaction>>;\n const selector = `#${this.__transactionLoaderId}`;\n return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n }\n\n private get __templateSet() {\n type Loader = NucleonElement<Resource<Rels.TemplateSet>>;\n const selector = `#${this.__templateSetLoaderId}`;\n return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n }\n\n private get __store() {\n type Loader = NucleonElement<Resource<Rels.Store>>;\n const selector = `#${this.__storeLoaderId}`;\n return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n }\n\n private get __cart() {\n type Loader = NucleonElement<Resource<Rels.Cart>>;\n const selector = `#${this.__cartLoaderId}`;\n return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n }\n}\n"]}
1	+ {"version":3,"file":"ItemOptionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemOptionCard/ItemOptionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'item-option-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/*\n Basic card displaying an item option.\n \n @slot title:before\n * @slot title:after\n \n @slot subtitle:before\n * @slot subtitle:after\n \n @element foxy-item-option-card\n * @since 1.17.0\n */\nexport class ItemOptionCard extends Base<Data> {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n localeCodes: { type: String, attribute: 'locale-codes' },\n };\n }\n\n localeCodes: string \| null = null;\n\n private readonly __transactionTemplateLoaderId = 'transactionTemplateLoader';\n\n private readonly __defaultTemplateSetLoaderId = 'defaultTemplateSetLoader';\n\n private readonly __localeCodesHelperLoaderId = 'localeCodesLoader';\n\n private readonly __transactionLoaderId = 'transactionLoader';\n\n private readonly __templateSetLoaderId = 'templateSetLoader';\n\n private readonly __storeLoaderId = 'storeLoader';\n\n private readonly __cartLoaderId = 'cartLoader';\n\n renderBody(): TemplateResult {\n const currencyDisplay = this.__store?.use_international_currency_symbol ? 'code' : 'symbol';\n const transaction = this.__transaction;\n\n let currencyCode: string \| null = null;\n\n if (transaction) {\n currencyCode = transaction.currency_code;\n } else {\n const cart = this.__cart ?? this.__transactionTemplate;\n\n if (cart && 'currency_code' in cart) {\n // TODO: remove the directive below once the SDK is updated\n // @ts-expect-error SDK types are incomplete\n currencyCode = cart.currency_code;\n } else {\n const allLocaleCodes = this.__localeCodesHelper;\n const localeCode = (this.__templateSet ?? this.__defaultTemplateSet)?.locale_code;\n const localeInfo = localeCode ? allLocaleCodes?.values[localeCode] : void 0;\n\n if (localeInfo) currencyCode = /Currency: ([A-Z]{3})/g.exec(localeInfo)?.[1] ?? null;\n }\n }\n\n return html`\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__transactionTemplateHref)}\n id=${this.__transactionTemplateLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__defaultTemplateSetHref)}\n id=${this.__defaultTemplateSetLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__localeCodesHelperHref)}\n id=${this.__localeCodesHelperLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__transactionHref)}\n id=${this.__transactionLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__templateSetHref)}\n id=${this.__templateSetLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__storeHref)}\n id=${this.__storeLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__cartHref)}\n id=${this.__cartLoaderId}\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n ${super.renderBody({\n title: data => {\n if (!currencyCode \|\| !currencyDisplay) return html`&ZeroWidthSpace;`;\n\n let priceMod: string;\n\n try {\n priceMod = Math.abs(data.price_mod).toLocaleString(this.lang \|\| 'en', {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n currencyDisplay: currencyDisplay,\n currency: currencyCode,\n style: 'currency',\n });\n } catch {\n priceMod = '--';\n }\n\n return html`${data.name} • ${priceMod} • ${data.weight_mod}`;\n },\n subtitle: data => html`${data.value}`,\n })}\n `;\n }\n\n private get __transactionTemplateHref() {\n try {\n const links = this.data?._links as Partial<Record<string, { href: string }>> \| undefined;\n const url = new URL(links?.['fx:subscription']?.href ?? '');\n url.searchParams.set('zoom', 'transaction_template');\n return url.toString();\n } catch {\n //\n }\n }\n\n private get __defaultTemplateSetHref() {\n const templateSetUri = (this.__cart ?? this.__transactionTemplate)?.template_set_uri;\n\n if (templateSetUri === '') {\n try {\n const url = new URL(this.__store?._links['fx:template_sets'].href ?? '');\n url.searchParams.set('code', 'DEFAULT');\n return url.toString();\n } catch {\n //\n }\n }\n }\n\n private get __localeCodesHelperHref() {\n if (this.__defaultTemplateSetHref \|\| this.__templateSetHref) {\n return this.localeCodes ?? void 0;\n }\n }\n\n private get __transactionHref() {\n return this.data?._links['fx:transaction']?.href;\n }\n\n private get __templateSetHref() {\n const cart = this.__cart ?? this.__transactionTemplate;\n // TODO: remove the directive below once SDK is updated\n // @ts-expect-error SDK types are incomplete\n const currencyCode = cart?.currency_code as string \| undefined;\n\n if (!currencyCode) return cart?.template_set_uri \|\| void 0;\n }\n\n private get __storeHref() {\n return this.data?._links['fx:store']?.href;\n }\n\n private get __cartHref() {\n const links = this.data?._links as Partial<Record<string, { href: string }>> \| undefined;\n return links?.['fx:cart']?.href;\n }\n\n private get __transactionTemplate() {\n type Loader = NucleonElement<Resource<Rels.Subscription, { zoom: 'transaction_template' }>>;\n const selector = `#${this.__transactionTemplateLoaderId}`;\n const loader = this.renderRoot.querySelector<Loader>(selector);\n return loader?.data?._embedded['fx:transaction_template'] ?? null;\n }\n\n private get __defaultTemplateSet() {\n type Loader = NucleonElement<Resource<Rels.TemplateSets>>;\n const selector = `#${this.__defaultTemplateSetLoaderId}`;\n const loader = this.renderRoot.querySelector<Loader>(selector);\n return loader?.data?._embedded['fx:template_sets'][0] ?? null;\n }\n\n private get __localeCodesHelper() {\n type Loader = NucleonElement<Resource<Rels.LocaleCodes>>;\n const selector = `#${this.__localeCodesHelperLoaderId}`;\n return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n }\n\n private get __transaction() {\n type Loader = NucleonElement<Resource<Rels.Transaction>>;\n const selector = `#${this.__transactionLoaderId}`;\n return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n }\n\n private get __templateSet() {\n type Loader = NucleonElement<Resource<Rels.TemplateSet>>;\n const selector = `#${this.__templateSetLoaderId}`;\n return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n }\n\n private get __store() {\n type Loader = NucleonElement<Resource<Rels.Store>>;\n const selector = `#${this.__storeLoaderId}`;\n return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n }\n\n private get __cart() {\n type Loader = NucleonElement<Resource<Rels.Cart>>;\n const selector = `#${this.__cartLoaderId}`;\n return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n }\n}\n"]}

package/dist/elements/public/PaymentsApiFraudProtectionCard/PaymentsApiFraudProtectionCard.d.ts CHANGED Viewed

@@ -30,6 +30,6 @@ export declare class PaymentsApiFraudProtectionCard extends Base<Data> {
      * If left `null`, the card will display the default image.
      */
     getImageSrc: ((type: string) => string) | null;
-    render(): TemplateResult;
+    renderBody(): TemplateResult;
 }
 export {};

package/dist/elements/public/PaymentsApiFraudProtectionCard/PaymentsApiFraudProtectionCard.js CHANGED Viewed

@@ -38,9 +38,9 @@ export class PaymentsApiFraudProtectionCard extends Base {
             getImageSrc: { attribute: false },
         };
     }
-    render() {
+    renderBody() {
         var _a, _b;
-        const defaultLayout = super.render({
+        const defaultLayout = super.renderBody({
             title: data => html `${data.helper.name}`,
             subtitle: data => html `${data.description}`,
         });
@@ -49,7 +49,10 @@ export class PaymentsApiFraudProtectionCard extends Base {
         const defaultSrc = PaymentsApiFraudProtectionCard.defaultImageSrc;
         const data = this.data;
         return html `
-      <figure class="flex items-center gap-m">
+      <figure
+        class="flex items-center"
+        style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+      >
         <img
           class="relative h-s w-s object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs"
           src=${(_b = (data ? (_a = this.getImageSrc) === null || _a === void 0 ? void 0 : _a.call(this, data.type) : null)) !== null && _b !== void 0 ? _b : defaultSrc}

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

	@@ -1 +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;~~IA0BxD~~,CAAC;~~IAzCC~~,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,~~MAAM~~;;~~QACJ~~,MAAM,aAAa,GAAG,KAAK,CAAC,~~MAAM~~,CAAC;~~YACjC~~,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~~;;;;gBAIC~~,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 ~~render~~(): TemplateResult {\n const defaultLayout = super.~~render~~({\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 class=\"flex items-center ~~gap~~-m\">\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"]}
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"]}

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

@@ -1,17 +1,55 @@
+import type { Templates, Data } from './types';
 import type { PropertyDeclarations } from 'lit-element';
 import type { TemplateResult } from 'lit-html';
-import type { Data } from './types';
 import type { NucleonV8N } from '../NucleonElement/types';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
-declare const PaymentsApiFraudProtectionForm_base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
 };
-export declare class PaymentsApiFraudProtectionForm extends PaymentsApiFraudProtectionForm_base<Data> {
+/**
+ * Form element for the `fx:fraud_protection` resource of Payments API.
+ *
+ * _Payments API is a client-side virtual API layer built on top of hAPI
+ * in an attempt to streamline access to stores' payment method settings
+ * 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
+ */
+export declare class PaymentsApiFraudProtectionForm extends Base<Data> {
     static get defaultImageSrc(): string;
     static get properties(): PropertyDeclarations;
     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;
     renderBody(): TemplateResult;
+    private get __availableFraudProtectionsLoader();
+    private get __availableFraudProtectionsHref();
+    private get __availableFraudProtections();
+    private __renderFraudProtectionSelector;
+    private __renderFraudProtectionConfig;
     private __renderBlock;
 }
 export {};

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

@@ -1,13 +1,49 @@
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { html } from 'lit-html';
 import get from 'lodash-es/get';
 import set from 'lodash-es/set';
 import has from 'lodash-es/has';
-export class PaymentsApiFraudProtectionForm extends TranslatableMixin(InternalForm, 'payments-api-fraud-protection-form') {
+const NS = 'payments-api-fraud-protection-form';
+const Base = TranslatableMixin(InternalForm, NS);
+/**
+ * Form element for the `fx:fraud_protection` resource of Payments API.
+ *
+ * _Payments API is a client-side virtual API layer built on top of hAPI
+ * in an attempt to streamline access to stores' payment method settings
+ * 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
+ */
+export class PaymentsApiFraudProtectionForm extends Base {
     constructor() {
         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() {
         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";
@@ -22,27 +58,28 @@ export class PaymentsApiFraudProtectionForm extends TranslatableMixin(InternalFo
         return [
             ({ description: v }) => !v || v.length <= 100 || 'description:v8n_too_long',
             ({ type: v }) => !!v || 'type:v8n_required',
-            ({ score_threshold_reject: v }) => typeof v !== 'number' || (v <= 100 && v >= 0) || 'score-threshold-reject:v8n_out_of_range',
+            ({ score_threshold_reject: v }) => {
+                if (typeof v !== 'number')
+                    return true;
+                return (v <= 100 && v >= 0) || 'score-threshold-reject:v8n_out_of_range';
+            },
             form => {
                 var _a, _b, _c, _d;
                 const blocks = (_c = (_b = (_a = form.helper) === null || _a === void 0 ? void 0 : _a.json) === null || _b === void 0 ? void 0 : _b.blocks) !== null && _c !== void 0 ? _c : [];
-                let additionalFields;
+                let json;
                 try {
-                    additionalFields = JSON.parse((_d = form.json) !== null && _d !== void 0 ? _d : '{}');
+                    json = JSON.parse((_d = form.json) !== null && _d !== void 0 ? _d : '{}');
                 }
                 catch (_e) {
-                    additionalFields = {};
+                    json = {};
                 }
                 for (const block of blocks) {
                     for (const field of block.fields) {
                         if ('optional' in field) {
                             if (!field.optional) {
                                 const path = [block.parent_id, block.id, field.id].filter(v => !!v);
-                                if (!has(additionalFields, path)) {
-                                    if (field.type !== 'checkbox') {
-                                        return 'additional-fields:v8n_invalid';
-                                    }
-                                }
+                                if (!has(json, path) && field.type !== 'checkbox')
+                                    return 'json:v8n_invalid';
                             }
                         }
                     }
@@ -52,100 +89,116 @@ export class PaymentsApiFraudProtectionForm extends TranslatableMixin(InternalFo
         ];
     }
     renderBody() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        let availableFraudProtectionsUrl;
+        return this.form.type
+            ? this.__renderFraudProtectionConfig(this.form.type)
+            : this.__renderFraudProtectionSelector();
+    }
+    get __availableFraudProtectionsLoader() {
+        return this.renderRoot.querySelector(`#${this.__availableFraudProtectionsLoaderId}`);
+    }
+    get __availableFraudProtectionsHref() {
         try {
             const presetIdRegex = /\/payment_presets\/(?<presetId>.+)\//;
-            const presetId = presetIdRegex.exec(new URL(this.href || this.parent).pathname).groups
-                .presetId;
+            const pathname = new URL(this.href || this.parent).pathname;
+            const presetId = presetIdRegex.exec(pathname).groups.presetId;
             const url = new URL(`/payment_presets/${presetId}/available_fraud_protections`, this.href || this.parent);
-            availableFraudProtectionsUrl = url.toString();
+            return url.toString();
         }
-        catch (_l) {
-            availableFraudProtectionsUrl = '';
+        catch (_a) {
+            // ignore
         }
-        const availableFraudProtections = (_a = this.renderRoot.querySelector('#available-fraud-protections')) === null || _a === void 0 ? void 0 : _a.data;
+    }
+    get __availableFraudProtections() {
+        var _a, _b;
+        return (_b = (_a = this.__availableFraudProtectionsLoader) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.values;
+    }
+    __renderFraudProtectionSelector() {
+        var _a;
         const defaultSrc = PaymentsApiFraudProtectionForm.defaultImageSrc;
         return html `
       <foxy-nucleon
         class="hidden"
-        href=${availableFraudProtectionsUrl}
-        id="available-fraud-protections"
+        infer=""
+        href=${ifDefined(this.__availableFraudProtectionsHref)}
+        id=${this.__availableFraudProtectionsLoaderId}
         @update=${() => this.requestUpdate()}
       >
       </foxy-nucleon>
-      ${this.form.type
-            ? html `
-            <figure class="relative flex flex-col gap-m p-m items-center">
-              <img
-                class="relative h-xl w-xl object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs"
-                src=${(_c = (_b = this.getImageSrc) === null || _b === void 0 ? void 0 : _b.call(this, this.form.type)) !== null && _c !== void 0 ? _c : defaultSrc}
-                alt=""
-                @error=${(evt) => (evt.currentTarget.src = defaultSrc)}
-              />
+      <foxy-i18n
+        class="block text-xxl font-bold border-b border-contrast-10 pb-m"
+        infer=""
+        key="select_protection_title"
+      >
+      </foxy-i18n>
-              <figcaption class="relative min-w-0 font-bold text-xl text-center">
-                ${(_e = (_d = this.form.helper) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : this.form.type}&ZeroWidthSpace;
-              </figcaption>
-            </figure>
+      <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;
+            }}
+                    />
-            <div
-              class="rounded-t-l rounded-b-l border border-contrast-10 p-m grid grid-cols-1 gap-m"
-            >
-              ${((_f = this.form.helper) === null || _f === void 0 ? void 0 : _f.uses_rejection_threshold) ? html `
-                    <foxy-internal-integer-control infer="score-threshold-reject">
-                    </foxy-internal-integer-control>
-                  `
-                : ''}
-              ${(_h = (_g = this.form.helper) === null || _g === void 0 ? void 0 : _g.json) === null || _h === void 0 ? void 0 : _h.blocks.map(block => this.__renderBlock(block))}
-            </div>
+                    <figcaption class="min-w-0 flex-1 truncate leading-s font-semibold">
+                      ${helper.name}&ZeroWidthSpace;
+                    </figcaption>
+                  </figure>
+                </button>
+              </li>
+            `;
+        })}
+        </ul>
+      </div>
+    `;
+    }
+    __renderFraudProtectionConfig(type) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const defaultSrc = PaymentsApiFraudProtectionForm.defaultImageSrc;
+        return html `
+      <figure data-testid="logo" class="relative flex flex-col gap-m p-m items-center">
+        <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}
+          alt=""
+          @error=${(evt) => (evt.currentTarget.src = defaultSrc)}
+        />
-            <foxy-internal-text-control infer="description"></foxy-internal-text-control>
+        <figcaption class="relative min-w-0 font-bold 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>
-            ${((_j = this.data) === null || _j === void 0 ? void 0 : _j.type) ? ''
-                : html `
-                  <vaadin-button theme="contrast" @click=${() => this.undo()}>
-                    <foxy-i18n infer="" key="select_another_button_label"></foxy-i18n>
-                  </vaadin-button>
-                `}
-            ${super.renderBody()}
+      <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 `
+            <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 `
-            <foxy-i18n
-              class="block text-xxl font-bold border-b border-contrast-10 pb-m"
-              infer=""
-              key="select_protection_title"
+            <vaadin-button
+              data-testid="select-another-button"
+              theme="contrast"
+              @click=${() => this.undo()}
             >
-            </foxy-i18n>
-            <div>
-              <div class="-my-s grid grid-cols-1">
-                ${Object.entries((_k = availableFraudProtections === null || availableFraudProtections === void 0 ? void 0 : availableFraudProtections.values) !== null && _k !== void 0 ? _k : {}).map(([type, helper]) => {
-                var _a, _b;
-                return html `
-                    <button
-                      class="block text-left hover-bg-contrast-5 p-s rounded-t-l rounded-b-l -mx-s"
-                      @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-semibold">
-                          ${helper.name}&ZeroWidthSpace;
-                        </figcaption>
-                      </figure>
-                    </button>
-                  `;
-            })}
-              </div>
-            </div>
+              <foxy-i18n infer="" key="select_another_button_label"></foxy-i18n>
+            </vaadin-button>
           `}
+      ${super.renderBody()}
     `;
     }
     __renderBlock(block) {
@@ -176,14 +229,17 @@ export class PaymentsApiFraudProtectionForm extends TranslatableMixin(InternalFo
                 this.edit({ json: JSON.stringify(set(config, path, newValue)) });
             };
             const options = field.options;
+            const path = [block.parent_id, block.id, field.id].filter(v => !!v);
+            const scope = ['json', ...path].join('-').replace(/_/g, '-');
             return html `
         ${field.type === 'checkbox'
                 ? html `
               <foxy-internal-checkbox-group-control
                 helper-text=${(_a = field.description) !== null && _a !== void 0 ? _a : ''}
                 label=""
+                infer=${scope}
                 .options=${[{ label: field.name, value: 'checked' }]}
-                .getValue=${getValue}
+                .getValue=${() => (getValue() ? ['checked'] : [])}
                 .setValue=${(newValue) => setValue(newValue.includes('checked'))}
               >
               </foxy-internal-checkbox-group-control>
@@ -194,6 +250,7 @@ export class PaymentsApiFraudProtectionForm extends TranslatableMixin(InternalFo
                 helper-text=${(_b = field.description) !== null && _b !== void 0 ? _b : ''}
                 placeholder=${(_e = (_d = (_c = field.options) === null || _c === void 0 ? void 0 : _c.find(o => o.value === field.default_value)) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : this.t('default_additional_field_placeholder')}
                 label=${field.name}
+                infer=${scope}
                 .options=${options.map(({ name, value }) => ({ label: name, value }))}
                 .getValue=${getValue}
                 .setValue=${setValue}
@@ -205,6 +262,7 @@ export class PaymentsApiFraudProtectionForm extends TranslatableMixin(InternalFo
                 helper-text=${(_f = field.description) !== null && _f !== void 0 ? _f : ''}
                 placeholder=${field.default_value || this.t('default_additional_field_placeholder')}
                 label=${field.name}
+                infer=${scope}
                 .getValue=${getValue}
                 .setValue=${setValue}
               >

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

	@@ -1 +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 { PropertyDeclarations } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { Block, Data } from './types';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\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\nexport class PaymentsApiFraudProtectionForm extends TranslatableMixin(\n InternalForm,\n 'payments-api-fraud-protection-form'\n)<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 ({ type: v }) => !!v \|\| 'type:v8n_required',\n ({ score_threshold_reject: v }) =>\n typeof v !== 'number' \|\| (v <= 100 && v >= 0) \|\| 'score-threshold-reject:v8n_out_of_range',\n\n form => {\n const blocks = form.helper?.json?.blocks ?? [];\n let additionalFields: Record<string, unknown>;\n\n try {\n additionalFields = JSON.parse(form.json ?? '{}');\n } catch {\n additionalFields = {};\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\n if (!has(additionalFields, path)) {\n if (field.type !== 'checkbox') {\n return 'additional-fields:v8n_invalid';\n }\n }\n }\n }\n }\n }\n\n return true;\n },\n ];\n }\n\n getImageSrc: ((type: string) => string) \| null = null;\n\n renderBody(): TemplateResult {\n let availableFraudProtectionsUrl: string;\n\n try {\n const presetIdRegex = /\\/payment_presets\\/(?<presetId>.+)\\//;\n const presetId = presetIdRegex.exec(new URL(this.href \|\| this.parent).pathname)!.groups!\n .presetId;\n const url = new URL(\n `/payment_presets/${presetId}/available_fraud_protections`,\n this.href \|\| this.parent\n );\n\n availableFraudProtectionsUrl = url.toString();\n } catch {\n availableFraudProtectionsUrl = '';\n }\n\n const availableFraudProtections = this.renderRoot.querySelector<\n NucleonElement<AvailableFraudProtections>\n >('#available-fraud-protections')?.data;\n\n const defaultSrc = PaymentsApiFraudProtectionForm.defaultImageSrc;\n\n return html`\n <foxy-nucleon\n class=\"hidden\"\n href=${availableFraudProtectionsUrl}\n id=\"available-fraud-protections\"\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n ${this.form.type\n ? html`\n <figure 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?.(this.form.type) ?? defaultSrc}\n alt=\"\"\n @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n />\n\n <figcaption class=\"relative min-w-0 font-bold text-xl text-center\">\n ${this.form.helper?.name ?? this.form.type}&ZeroWidthSpace;\n </figcaption>\n </figure>\n\n <div\n class=\"rounded-t-l rounded-b-l border border-contrast-10 p-m grid grid-cols-1 gap-m\"\n >\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 </div>\n\n <foxy-internal-text-control infer=\"description\"></foxy-internal-text-control>\n\n ${this.data?.type\n ? ''\n : html`\n <vaadin-button theme=\"contrast\" @click=${() => this.undo()}>\n <foxy-i18n infer=\"\" key=\"select_another_button_label\"></foxy-i18n>\n </vaadin-button>\n `}\n ${super.renderBody()}\n `\n : html`\n <foxy-i18n\n class=\"block text-xxl font-bold border-b border-contrast-10 pb-m\"\n infer=\"\"\n key=\"select_protection_title\"\n >\n </foxy-i18n>\n\n <div>\n <div class=\"-my-s grid grid-cols-1\">\n ${Object.entries(availableFraudProtections?.values ?? {}).map(([type, helper]) => {\n return html`\n <button\n class=\"block text-left hover-bg-contrast-5 p-s rounded-t-l rounded-b-l -mx-s\"\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 <figcaption class=\"min-w-0 flex-1 truncate leading-s font-semibold\">\n ${helper.name}&ZeroWidthSpace;\n </figcaption>\n </figure>\n </button>\n `;\n })}\n </div>\n </div>\n `}\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\n return html`\n ${field.type === 'checkbox'\n ? html`\n <foxy-internal-checkbox-group-control\n helper-text=${field.description ?? ''}\n label=\"\"\n .options=${[{ label: field.name, value: 'checked' }]}\n .getValue=${getValue}\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 .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 .getValue=${getValue}\n .setValue=${setValue}\n >\n </foxy-internal-text-control>\n `}\n `;\n })}`;\n }\n}\n"]}
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-bold 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-semibold\">\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-bold 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"]}

package/dist/elements/public/PaymentsApiFraudProtectionForm/index.d.ts CHANGED Viewed

@@ -1,11 +1,10 @@
-import '@vaadin/vaadin-tabs';
-import '../../internal/InternalAsyncComboBoxControl/index';
+import '@vaadin/vaadin-button';
 import '../../internal/InternalCheckboxGroupControl/index';
-import '../../internal/InternalRadioGroupControl/index';
 import '../../internal/InternalIntegerControl/index';
 import '../../internal/InternalSelectControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
+import '../NucleonElement/index';
 import '../I18n/index';
 import { PaymentsApiFraudProtectionForm } from './PaymentsApiFraudProtectionForm';
 export { PaymentsApiFraudProtectionForm };

package/dist/elements/public/PaymentsApiFraudProtectionForm/index.js CHANGED Viewed

@@ -1,11 +1,10 @@
-import '@vaadin/vaadin-tabs';
-import "../../internal/InternalAsyncComboBoxControl/index.js";
+import '@vaadin/vaadin-button';
 import "../../internal/InternalCheckboxGroupControl/index.js";
-import "../../internal/InternalRadioGroupControl/index.js";
 import "../../internal/InternalIntegerControl/index.js";
 import "../../internal/InternalSelectControl/index.js";
 import "../../internal/InternalTextControl/index.js";
 import "../../internal/InternalForm/index.js";
+import "../NucleonElement/index.js";
 import "../I18n/index.js";
 import { PaymentsApiFraudProtectionForm } from "./PaymentsApiFraudProtectionForm.js";
 customElements.define('foxy-payments-api-fraud-protection-form', PaymentsApiFraudProtectionForm);