npm - @foxy.io/elements - Versions diffs - 1.14.0-beta.11 → 1.14.0-beta.12 - Mend

@foxy.io/elements 1.14.0-beta.11 → 1.14.0-beta.12

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 (71) hide show

package/dist/elements/public/TemplateConfigForm/CountriesList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CountriesList.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateConfigForm/CountriesList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAClF,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,yBAAsB;AAC5C,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAIlE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,MAAM,IAAI,GAAG,mBAAmB,CAAC,cAAc,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;~~AAEpF~~,MAAM,OAAO,aAAc,SAAQ,IAA8B;IAAjE;;~~QAmBE~~,cAAS,GAAmC,EAAE,CAAC;QAE/C,~~aAAQ,GAAG,KAAK,CAAC;QAEjB,aAAQ,GAAG,KAAK,CAAC;QAEjB,~~YAAO,GAAG,EAAE,CAAC;~~QAEb~~,~~YAAO~~,GAAG,EAAE,CAAC;~~IA0Gf~~,CAAC;~~IApIC~~,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,gBAAgB,EAAE,WAAW;YAC7B,WAAW,EAAE,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC;SAC7C,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,~~SAAS~~,EAAE,EAAE,~~IAAI~~,EAAE,~~MAAM~~,EAAE;~~YAC3B~~,~~QAAQ~~,EAAE,EAAE,IAAI,EAAE,~~OAAO~~,EAAE;YAC3B,~~QAAQ,EAAE,EAAE,IAAI,EAAE,~~OAAO,EAAE~~;YAC3B~~,~~OAAO,~~EAAE,~~EAAE,~~IAAI,EAAE,MAAM,EAAE;~~YACzB,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;~~SAC1B,CAAC;IACJ,CAAC;~~IAYD~~,MAAM;;QACJ,OAAO,IAAI,CAAA;;;YAGH,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,EAAE;;YAC1D,IAAI,WAAmB,CAAC;YAExB,IAAI;gBACF,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBAClC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;gBAC9C,WAAW,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;aAC9B;YAAC,WAAM;gBACN,WAAW,GAAG,EAAE,CAAC;aAClB;YAED,OAAO,IAAI,CAAA;;0BAEG,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;uBACjD,OAAO;uBACP,SAAS,aAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAC,OAAO,2CAAG,OAAO,CAAC;uBAC9C,WAAW;uBACX,IAAI,CAAC,IAAI;qBACX,IAAI,CAAC,EAAE;4BACA,IAAI,CAAC,QAAQ;4BACb,IAAI,CAAC,QAAQ;kCACP,CAAC,GAAgB,EAAE,EAAE;gBACrC,MAAM,YAAY,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;gBAC3C,MAAM,UAAU,GAAI,GAAG,CAAC,aAA6B,CAAC,OAAO,CAAC;gBAE9D,YAAY,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC;gBAC7D,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;gBAE9B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC;YAC1D,CAAC;0BACS,GAAG,EAAE;gBACb,MAAM,YAAY,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;gBAC3C,OAAO,YAAY,CAAC,OAAO,CAAC,CAAC;gBAC7B,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;gBAE9B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC;YAC1D,CAAC;;;aAGJ,CAAC;QACJ,CAAC,CAAC~~;;;oBAGQ~~,QAAQ,CAAC;YACf,iDAAiD,EAAE,IAAI;YACvD,2CAA2C,EAAE,IAAI;YACjD,0BAA0B,EAAE,CAAC,IAAI,CAAC,QAAQ;YAC1C,oDAAoD,EAAE,CAAC,IAAI,CAAC,QAAQ;YACpE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;;;4BAGc,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC;;;uBAG1B,IAAI,CAAC,~~OAAO~~;~~0BACT~~,IAAI,CAAC,QAAQ;0BACb,IAAI,CAAC,QAAQ;yBACd,CAAC,GAAkB,EAAE,EAAE;YAChC,IAAI,GAAG,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,~~OAAO~~;gBAAE,IAAI,CAAC,YAAY,EAAE,CAAC;~~QAC/D~~,CAAC;uBACQ,CAAC,GAAe,EAAE,EAAE;YAC3B,MAAM,MAAM,GAAG,GAAG,CAAC,aAAiC,CAAC;YACrD,IAAI,CAAC,~~OAAO~~,GAAG,MAAM,CAAC,KAAK,CAAC;~~QAC9B~~,CAAC;;;;~~sBAIO~~,QAAQ,CAAC;YACf,qBAAqB,EAAE,IAAI;YAC3B,iEAAiE,EAAE,IAAI;YACvE,4CAA4C,EAAE,CAAC,IAAI,CAAC,~~OAAO~~;~~YAC3D~~,2CAA2C,EAAE,CAAC,CAAC,IAAI,CAAC,~~OAAO~~;~~YAC3D~~,8CAA8C,EAAE,CAAC,CAAC,IAAI,CAAC,~~OAAO~~;~~YAC9D~~,4DAA4D,EAAE,CAAC,CAAC,IAAI,CAAC,~~OAAO~~;~~SAC7E~~,CAAC;;0BAEU,CAAC,IAAI,CAAC,~~OAAO~~,IAAI,IAAI,CAAC,QAAQ;~~uBACjC~~,IAAI,CAAC,YAAY;;;;;;;;YAQ5B,MAAM,CAAC,~~MAAM~~,aAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,mCAAI,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;~~YACrD~~,OAAO,IAAI,CAAA,iBAAiB,~~OAAO~~,~~CAAC,GAAG,~~IAAI,OAAO,CAAC,OAAO,WAAW,CAAC;~~QACxE~~,CAAC,CAAC;;;KAGP,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,~~OAAO~~,CAAC,EAAE,GAAG,EAAE,CAAC;~~QAC5D~~,IAAI,CAAC,~~OAAO~~,GAAG,EAAE,CAAC;~~QAClB~~,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC1D,CAAC;CACF","sourcesContent":["import { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { CountryCard } from './CountryCard';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nconst Base = ScopedElementsMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));\n\nexport class CountriesList extends Base<Resource<Rels.Countries>> {\n static get scopedElements(): ScopedElementsMap {\n return {\n 'x-country-card': CountryCard,\n 'iron-icon': customElements.get('iron-icon'),\n };\n }\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n ~~countries~~: { ~~type~~: ~~Object~~ },\n ~~disabled~~: { type: ~~Boolean~~ },\n ~~readonly: { type: Boolean },\n~~ regions: { type: String },\n ~~country: { type: String },\n~~ };\n }\n\n countries: Record<string, '' \| string[]> = {};\n\n ~~disabled = false;\n\n readonly = false;\n\n~~ regions = '';\n\n ~~country~~ = '';\n\n render(): TemplateResult {\n return html`\n <div>\n <div class=\"space-y-s\">\n ${Object.entries(this.countries).map(([country, regions]) => {\n let regionsLink: string;\n\n try {\n const url = new URL(this.regions);\n url.searchParams.set('country_code', country);\n regionsLink = url.toString();\n } catch {\n regionsLink = '';\n }\n\n return html`\n <x-country-card\n regions=${JSON.stringify(regions === '' ? [] : regions)}\n code=${country}\n name=${ifDefined(this.data?.values[country]?.default)}\n href=${regionsLink}\n lang=${this.lang}\n ns=${this.ns}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @update:regions=${(evt: CustomEvent) => {\n const newCountries = { ...this.countries };\n const newRegions = (evt.currentTarget as CountryCard).regions;\n\n newCountries[country] = newRegions.length ? newRegions : '';\n this.countries = newCountries;\n\n this.dispatchEvent(new CustomEvent('update:countries'));\n }}\n @delete=${() => {\n const newCountries = { ...this.countries };\n delete newCountries[country];\n this.countries = newCountries;\n\n this.dispatchEvent(new CustomEvent('update:countries'));\n }}\n >\n </x-country-card>\n `;\n })}\n\n <div\n class=${classMap({\n 'h-m flex items-center rounded transition-colors': true,\n 'border border-contrast-10 ring-primary-50': true,\n 'hover-border-contrast-40': !this.disabled,\n 'focus-within-ring-1 focus-within-border-primary-50': !this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n >\n <input\n placeholder=${this.t('add_country')}\n class=\"w-full bg-transparent appearance-none h-m text-s px-m focus-outline-none\"\n list=\"list\"\n .value=${this.~~country~~}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => {\n if (evt.key === 'Enter' && this.~~country~~) this.__addCountry();\n }}\n @input=${(evt: InputEvent) => {\n const target = evt.currentTarget as HTMLInputElement;\n this.~~country~~ = target.value;\n }}\n />\n\n <button\n class=${classMap({\n 'mr-xs flex-shrink-0': true,\n 'flex items-center justify-center rounded-full transition-colors': true,\n 'bg-contrast-5 text-disabled cursor-default': !this.~~country~~,\n 'bg-success-10 text-success cursor-pointer': !!this.~~country~~,\n 'hover-bg-success hover-text-success-contrast': !!this.~~country~~,\n 'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.~~country~~,\n })}\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n ?disabled=${!this.~~country~~ \|\| this.disabled}\n @click=${this.__addCountry}\n >\n <iron-icon icon=\"icons:add\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n </div>\n\n <datalist id=\"list\">\n ${Object.~~values~~(this.data?.values ?? {}).map(country => {\n return html`<option value=${~~country.cc2~~}>${country.default}</option>`;\n })}\n </datalist>\n </div>\n `;\n }\n\n private __addCountry() {\n this.countries = { ...this.countries, [this.~~country~~]: '' };\n this.~~country~~ = '';\n this.dispatchEvent(new CustomEvent('update:countries'));\n }\n}\n"]}
1	+ {"version":3,"file":"CountriesList.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateConfigForm/CountriesList.ts"],"names":[],"mappings":"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","sourcesContent":["import { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { CountryCard } from './CountryCard';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nconst Base = ScopedElementsMixin(\n ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)))\n);\n\nexport class CountriesList extends Base<Resource<Rels.Countries>> {\n static get scopedElements(): ScopedElementsMap {\n return {\n 'x-country-card': CountryCard,\n 'iron-icon': customElements.get('iron-icon'),\n };\n }\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n __newCountry: { attribute: false },\n countries: { type: Object },\n regions: { type: String },\n };\n }\n\n countries: Record<string, '' \| string[]> = {};\n\n regions = '';\n\n private __newCountry = '';\n\n render(): TemplateResult {\n return html`\n <div>\n <div class=\"space-y-s\" data-testid=\"countries\">\n ${Object.entries(this.countries).map(([country, regions]) => {\n let regionsLink: string;\n\n try {\n const url = new URL(this.regions);\n url.searchParams.set('country_code', country);\n regionsLink = url.toString();\n } catch {\n regionsLink = '';\n }\n\n return html`\n <x-country-card\n regions=${JSON.stringify(regions === '' ? [] : regions)}\n code=${country}\n name=${ifDefined(this.data?.values[country]?.default)}\n href=${regionsLink}\n lang=${this.lang}\n ns=${this.ns}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @update:regions=${(evt: CustomEvent) => {\n const newCountries = { ...this.countries };\n const newRegions = (evt.currentTarget as CountryCard).regions;\n\n newCountries[country] = newRegions.length ? newRegions : '';\n this.countries = newCountries;\n\n this.dispatchEvent(new CustomEvent('update:countries'));\n }}\n @delete=${() => {\n const newCountries = { ...this.countries };\n delete newCountries[country];\n this.countries = newCountries;\n\n this.dispatchEvent(new CustomEvent('update:countries'));\n }}\n >\n </x-country-card>\n `;\n })}\n\n <div\n data-testid=\"new-country\"\n class=${classMap({\n 'h-m flex items-center rounded transition-colors': true,\n 'border border-contrast-10 ring-primary-50': true,\n 'hover-border-contrast-40': !this.disabled,\n 'focus-within-ring-1 focus-within-border-primary-50': !this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n >\n <input\n placeholder=${this.t('add_country')}\n class=\"w-full bg-transparent appearance-none h-m text-s px-m focus-outline-none\"\n list=\"list\"\n .value=${this.__newCountry}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => {\n if (evt.key === 'Enter' && this.__newCountry) this.__addCountry();\n }}\n @input=${(evt: InputEvent) => {\n const target = evt.currentTarget as HTMLInputElement;\n this.__newCountry = target.value;\n }}\n />\n\n <button\n aria-label=${this.t('create')}\n class=${classMap({\n 'mr-xs flex-shrink-0': true,\n 'flex items-center justify-center rounded-full transition-colors': true,\n 'bg-contrast-5 text-disabled cursor-default': !this.__newCountry,\n 'bg-success-10 text-success cursor-pointer': !!this.__newCountry,\n 'hover-bg-success hover-text-success-contrast': !!this.__newCountry,\n 'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.__newCountry,\n })}\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n ?disabled=${!this.__newCountry \|\| this.disabled}\n @click=${this.__addCountry}\n >\n <iron-icon icon=\"icons:add\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n </div>\n\n <datalist id=\"list\">\n ${Object.entries(this.data?.values ?? {}).map(([code, country]) => {\n return html`<option value=${code}>${country.default}</option>`;\n })}\n </datalist>\n </div>\n `;\n }\n\n private __addCountry() {\n this.countries = { ...this.countries, [this.__newCountry]: '' };\n this.__newCountry = '';\n this.dispatchEvent(new CustomEvent('update:countries'));\n }\n}\n"]}

package/dist/elements/public/TemplateConfigForm/CountryCard.d.ts CHANGED Viewed

@@ -10,12 +10,10 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
 } & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
 export declare class CountryCard extends Base<Resource<Rels.Regions>> {
     static get properties(): PropertyDeclarations;
-    disabled: boolean;
-    readonly: boolean;
     regions: string[];
-    region: string;
     name: string;
     code: string;
+    private __newRegion;
     render(): TemplateResult;
     private __addRegion;
 }

package/dist/elements/public/TemplateConfigForm/CountryCard.js CHANGED Viewed

@@ -8,20 +8,16 @@ const Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement))
 export class CountryCard extends Base {
     constructor() {
         super(...arguments);
-        this.disabled = false;
-        this.readonly = false;
         this.regions = [];
-        this.region = '';
         this.name = '';
         this.code = '';
+        this.__newRegion = '';
     }
     static get properties() {
         return {
             ...super.properties,
-            disabled: { type: Boolean },
-            readonly: { type: Boolean },
+            __newRegion: { attribute: false },
             regions: { type: Array },
-            region: { type: String },
             name: { type: String },
             code: { type: String },
         };
@@ -35,13 +31,17 @@ export class CountryCard extends Base {
             'text-disabled': this.disabled,
         })}
       >
-        <div class="h-m flex justify-between items-center border-b border-contrast-10">
+        <div
+          data-testid="country"
+          class="h-m flex justify-between items-center border-b border-contrast-10"
+        >
           <div class="ml-m">
             <span>${this.name || this.code}</span>
             ${this.name ? html `<span class="text-secondary">${this.code}</span>` : ''}
           </div>
           <button
+            aria-label=${this.t('delete')}
             class=${classMap({
             'mr-xs items-center justify-center rounded-full transition-colors': true,
             'hover-bg-error-10 hover-text-error': !this.disabled,
@@ -58,7 +58,7 @@ export class CountryCard extends Base {
           </button>
         </div>
-        <div class="flex flex-wrap p-xs">
+        <div data-testid="regions" class="flex flex-wrap p-xs">
           ${this.regions.map(region => {
             var _a, _b;
             const name = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.values[region]) === null || _b === void 0 ? void 0 : _b.default;
@@ -74,6 +74,7 @@ export class CountryCard extends Base {
                 </span>
                 <button
+                  aria-label=${this.t('delete')}
                   class=${classMap({
                 'items-center justify-center rounded-full transition-colors': true,
                 'hover-bg-error-10 hover-text-error': !this.disabled,
@@ -96,6 +97,7 @@ export class CountryCard extends Base {
         })}
           <div
+            data-testid="new-region"
             style="border-radius: var(--lumo-size-s)"
             class=${classMap({
             'h-s m-xs items-center transition-colors border border-contrast-10': true,
@@ -110,15 +112,16 @@ export class CountryCard extends Base {
               class="bg-transparent appearance-none h-s text-s px-s focus-outline-none"
               style="width: 8rem"
               list="list"
-              .value=${this.region}
+              .value=${this.__newRegion}
               ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
               @keydown=${(evt) => {
-            if (evt.key === 'Enter' && this.region)
+            if (evt.key === 'Enter' && this.__newRegion)
                 this.__addRegion();
         }}
               @input=${(evt) => {
             const target = evt.currentTarget;
-            this.region = target.value;
+            this.__newRegion = target.value;
         }}
             />
@@ -127,12 +130,12 @@ export class CountryCard extends Base {
               class=${classMap({
             'flex-shrink-0': true,
             'flex items-center justify-center rounded-full transition-colors': true,
-            'bg-contrast-5 text-disabled cursor-default': !this.region,
-            'bg-success-10 text-success cursor-pointer': !!this.region,
-            'hover-bg-success hover-text-success-contrast': !!this.region,
-            'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.region,
+            'bg-contrast-5 text-disabled cursor-default': !this.__newRegion,
+            'bg-success-10 text-success cursor-pointer': !!this.__newRegion,
+            'hover-bg-success hover-text-success-contrast': !!this.__newRegion,
+            'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.__newRegion,
         })}
-              ?disabled=${!this.region}
+              ?disabled=${this.disabled || !this.__newRegion}
               @click=${this.__addRegion}
             >
               <iron-icon icon="icons:add" class="icon-inline text-m"></iron-icon>
@@ -149,8 +152,8 @@ export class CountryCard extends Base {
     `;
     }
     __addRegion() {
-        this.regions = [...new Set([...this.regions, this.region])];
-        this.region = '';
+        this.regions = [...new Set([...this.regions, this.__newRegion])];
+        this.__newRegion = '';
         this.dispatchEvent(new CustomEvent('update:regions'));
     }
 }

package/dist/elements/public/TemplateConfigForm/CountryCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CountryCard.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateConfigForm/CountryCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));\n\nexport class CountryCard extends Base<Resource<Rels.Regions>> {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n disabled: { type: Boolean },\n readonly: { type: Boolean },\n regions: { type: Array },\n region: { type: String },\n name: { type: String },\n code: { type: String },\n };\n }\n\n disabled = false;\n\n readonly = false;\n\n regions: string[] = [];\n\n region = '';\n\n name = '';\n\n code = '';\n\n render(): TemplateResult {\n return html`\n <div\n class=${classMap({\n 'border border-contrast-10 rounded text-s': true,\n 'text-disabled': this.disabled,\n })}\n >\n <div class=\"h-m flex justify-between items-center border-b border-contrast-10\">\n <div class=\"ml-m\">\n <span>${this.name \|\| this.code}</span>\n ${this.name ? html`<span class=\"text-secondary\">${this.code}</span>` : ''}\n </div>\n\n <button\n class=${classMap({\n 'mr-xs items-center justify-center rounded-full transition-colors': true,\n 'hover-bg-error-10 hover-text-error': !this.disabled,\n 'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,\n 'cursor-default': this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n ?disabled=${this.disabled}\n @click=${() => this.dispatchEvent(new CustomEvent('delete'))}\n >\n <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n\n <div class=\"flex flex-wrap p-xs\">\n ${this.regions.map(region => {\n const name = this.data?.values[region]?.default;\n const code = region;\n\n return html`\n <div\n class=\"flex items-center border border-contrast-10 h-s m-xs\"\n style=\"border-radius: var(--lumo-size-s)\"\n >\n <span class=\"mx-s\">\n <span>${name \|\| code}</span>\n ${name ? html`<span class=\"text-secondary\">${code}</span>` : ''}\n </span>\n\n <button\n class=${classMap({\n 'items-center justify-center rounded-full transition-colors': true,\n 'hover-bg-error-10 hover-text-error': !this.disabled,\n 'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,\n 'cursor-default': this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n ?disabled=${this.disabled}\n @click=${() => {\n this.regions = this.regions.filter(value => value !== region);\n this.dispatchEvent(new CustomEvent('update:regions'));\n }}\n >\n <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n `;\n })}\n\n <div\n style=\"border-radius: var(--lumo-size-s)\"\n class=${classMap({\n 'h-s m-xs items-center transition-colors border border-contrast-10': true,\n 'hover-border-contrast-40': !this.disabled,\n 'focus-within-ring-1 ring-primary-50 focus-within-border-primary-50': !this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n >\n <input\n placeholder=${this.t('add_region')}\n class=\"bg-transparent appearance-none h-s text-s px-s focus-outline-none\"\n style=\"width: 8rem\"\n list=\"list\"\n .value=${this.region}\n ?disabled=${this.disabled}\n @keydown=${(evt: KeyboardEvent) => {\n if (evt.key === 'Enter' && this.region) this.__addRegion();\n }}\n @input=${(evt: InputEvent) => {\n const target = evt.currentTarget as HTMLInputElement;\n this.region = target.value;\n }}\n />\n\n <button\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n class=${classMap({\n 'flex-shrink-0': true,\n 'flex items-center justify-center rounded-full transition-colors': true,\n 'bg-contrast-5 text-disabled cursor-default': !this.region,\n 'bg-success-10 text-success cursor-pointer': !!this.region,\n 'hover-bg-success hover-text-success-contrast': !!this.region,\n 'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.region,\n })}\n ?disabled=${!this.region}\n @click=${this.__addRegion}\n >\n <iron-icon icon=\"icons:add\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n\n <datalist id=\"list\">\n ${Object.values(this.data?.values ?? {}).map(region => {\n return html`<option value=${region.code}>${region.default}</option>`;\n })}\n </datalist>\n </div>\n </div>\n `;\n }\n\n private __addRegion() {\n this.regions = [...new Set([...this.regions, this.region])];\n this.region = '';\n this.dispatchEvent(new CustomEvent('update:regions'));\n }\n}\n"]}
1	+ {"version":3,"file":"CountryCard.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateConfigForm/CountryCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));\n\nexport class CountryCard extends Base<Resource<Rels.Regions>> {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n __newRegion: { attribute: false },\n regions: { type: Array },\n name: { type: String },\n code: { type: String },\n };\n }\n\n regions: string[] = [];\n\n name = '';\n\n code = '';\n\n private __newRegion = '';\n\n render(): TemplateResult {\n return html`\n <div\n class=${classMap({\n 'border border-contrast-10 rounded text-s': true,\n 'text-disabled': this.disabled,\n })}\n >\n <div\n data-testid=\"country\"\n class=\"h-m flex justify-between items-center border-b border-contrast-10\"\n >\n <div class=\"ml-m\">\n <span>${this.name \|\| this.code}</span>\n ${this.name ? html`<span class=\"text-secondary\">${this.code}</span>` : ''}\n </div>\n\n <button\n aria-label=${this.t('delete')}\n class=${classMap({\n 'mr-xs items-center justify-center rounded-full transition-colors': true,\n 'hover-bg-error-10 hover-text-error': !this.disabled,\n 'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,\n 'cursor-default': this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n ?disabled=${this.disabled}\n @click=${() => this.dispatchEvent(new CustomEvent('delete'))}\n >\n <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n\n <div data-testid=\"regions\" class=\"flex flex-wrap p-xs\">\n ${this.regions.map(region => {\n const name = this.data?.values[region]?.default;\n const code = region;\n\n return html`\n <div\n class=\"flex items-center border border-contrast-10 h-s m-xs\"\n style=\"border-radius: var(--lumo-size-s)\"\n >\n <span class=\"mx-s\">\n <span>${name \|\| code}</span>\n ${name ? html`<span class=\"text-secondary\">${code}</span>` : ''}\n </span>\n\n <button\n aria-label=${this.t('delete')}\n class=${classMap({\n 'items-center justify-center rounded-full transition-colors': true,\n 'hover-bg-error-10 hover-text-error': !this.disabled,\n 'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,\n 'cursor-default': this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n ?disabled=${this.disabled}\n @click=${() => {\n this.regions = this.regions.filter(value => value !== region);\n this.dispatchEvent(new CustomEvent('update:regions'));\n }}\n >\n <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n `;\n })}\n\n <div\n data-testid=\"new-region\"\n style=\"border-radius: var(--lumo-size-s)\"\n class=${classMap({\n 'h-s m-xs items-center transition-colors border border-contrast-10': true,\n 'hover-border-contrast-40': !this.disabled,\n 'focus-within-ring-1 ring-primary-50 focus-within-border-primary-50': !this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n >\n <input\n placeholder=${this.t('add_region')}\n class=\"bg-transparent appearance-none h-s text-s px-s focus-outline-none\"\n style=\"width: 8rem\"\n list=\"list\"\n .value=${this.__newRegion}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => {\n if (evt.key === 'Enter' && this.__newRegion) this.__addRegion();\n }}\n @input=${(evt: InputEvent) => {\n const target = evt.currentTarget as HTMLInputElement;\n this.__newRegion = target.value;\n }}\n />\n\n <button\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n class=${classMap({\n 'flex-shrink-0': true,\n 'flex items-center justify-center rounded-full transition-colors': true,\n 'bg-contrast-5 text-disabled cursor-default': !this.__newRegion,\n 'bg-success-10 text-success cursor-pointer': !!this.__newRegion,\n 'hover-bg-success hover-text-success-contrast': !!this.__newRegion,\n 'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.__newRegion,\n })}\n ?disabled=${this.disabled \|\| !this.__newRegion}\n @click=${this.__addRegion}\n >\n <iron-icon icon=\"icons:add\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n\n <datalist id=\"list\">\n ${Object.values(this.data?.values ?? {}).map(region => {\n return html`<option value=${region.code}>${region.default}</option>`;\n })}\n </datalist>\n </div>\n </div>\n `;\n }\n\n private __addRegion() {\n this.regions = [...new Set([...this.regions, this.__newRegion])];\n this.__newRegion = '';\n this.dispatchEvent(new CustomEvent('update:regions'));\n }\n}\n"]}

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

@@ -105,12 +105,7 @@ export class TemplateConfigForm extends Base {
         const json = this.form.json ? JSON.parse(this.form.json) : getDefaultJSON();
         return html `
       <div class="relative" aria-busy=${this.in('busy')} aria-live="polite">
-        <div
-          class=${classMap({
-            'space-y-l transition-opacity': true,
-            'opacity-50': !this.in('idle'),
-        })}
-        >
+        <div class="space-y-l">
           ${hidden.matches('cart-type', true) ? '' : this.__renderCartType(json)}
           ${hidden.matches('foxycomplete', true) ? '' : this.__renderFoxycomplete(json)}
           ${hidden.matches('locations', true) ? '' : this.__renderLocations(json)}
@@ -197,32 +192,27 @@ export class TemplateConfigForm extends Base {
     }
     __renderFoxycomplete(json) {
         const { lang, ns } = this;
-        const isDisabled = this.disabledSelector.matches('foxycomplete', true);
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('foxycomplete', true);
         const isReadonly = this.readonlySelector.matches('foxycomplete', true);
+        const config = json.foxycomplete;
         const items = ['combobox', 'search', 'disabled'];
-        const value = json.foxycomplete.usage === 'none'
-            ? 'disabled'
-            : json.foxycomplete.show_combobox
-                ? 'combobox'
-                : 'search';
-        const renderFlagsCheckbox = () => html `
+        const value = config.usage === 'none' ? 'disabled' : config.show_combobox ? 'combobox' : 'search';
+        const flagsCheckbox = html `
       <x-checkbox
+        data-testid="foxycomplete-flags-check"
         ?disabled=${isDisabled}
         ?readonly=${isReadonly}
-        ?checked=${json.foxycomplete.show_flags}
+        ?checked=${config.show_flags}
         @change=${(evt) => {
-            const newConfig = {
-                ...json.foxycomplete,
-                show_flags: evt.detail,
-            };
-            this.edit({ json: JSON.stringify({ ...json, foxycomplete: newConfig }) });
+            config.show_flags = evt.detail;
+            this.edit({ json: JSON.stringify(json) });
         }}
       >
         <foxy-i18n lang=${lang} key="show_country_flags" ns=${ns}></foxy-i18n>
       </x-checkbox>
     `;
         return html `
-      <div>
+      <div data-testid="foxycomplete">
         ${this.renderTemplateOrSlot('foxycomplete:before')}
         <x-group frame>
@@ -236,6 +226,7 @@ export class TemplateConfigForm extends Base {
           </foxy-i18n>
           <x-choice
+            data-testid="foxycomplete-choice"
             .value=${value}
             .items=${items}
             ?disabled=${isDisabled}
@@ -243,12 +234,9 @@ export class TemplateConfigForm extends Base {
             @change=${(evt) => {
             if (!(evt instanceof ChoiceChangeEvent))
                 return;
-            const newConfig = {
-                ...json.foxycomplete,
-                usage: evt.detail === 'disabled' ? 'none' : 'required',
-                show_combobox: evt.detail === 'combobox',
-            };
-            this.edit({ json: JSON.stringify({ ...json, foxycomplete: newConfig }) });
+            config.usage = evt.detail === 'disabled' ? 'none' : 'required';
+            config.show_combobox = evt.detail === 'combobox';
+            this.edit({ json: JSON.stringify(json) });
         }}
           >
             ${items.map(item => {
@@ -272,17 +260,15 @@ export class TemplateConfigForm extends Base {
             const field = action === 'open' ? 'combobox_open' : 'combobox_close';
             return html `
                     <vaadin-text-field
+                      data-testid="foxycomplete-${action}-icon"
                       label=${this.t(`${action}_icon`)}
-                      .value=${json.foxycomplete[field]}
+                      .value=${config[field]}
                       ?disabled=${isDisabled}
                       ?readonly=${isReadonly}
+                      @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
                       @input=${(evt) => {
-                const target = evt.currentTarget;
-                const newConfig = {
-                    ...json.foxycomplete,
-                    [field]: target.value,
-                };
-                this.edit({ json: JSON.stringify({ ...json, foxycomplete: newConfig }) });
+                config[field] = evt.currentTarget.value;
+                this.edit({ json: JSON.stringify(json) });
             }}
                     >
                     </vaadin-text-field>
@@ -290,24 +276,21 @@ export class TemplateConfigForm extends Base {
         })}
               </div>
-              ${renderFlagsCheckbox()}
+              ${flagsCheckbox}
             </div>
-            <div slot="search" class="pb-s" ?hidden=${value !== 'search'}>
-              ${renderFlagsCheckbox()}
-            </div>
+            <div slot="search" class="pb-s" ?hidden=${value !== 'search'}>${flagsCheckbox}</div>
           </x-choice>
           <div class="border-t border-contrast-10 p-m">
             <x-checkbox
+              data-testid="foxycomplete-lookup-check"
               ?disabled=${isDisabled}
               ?readonly=${isReadonly}
               ?checked=${json.postal_code_lookup.usage === 'enabled'}
               @change=${(evt) => {
-            const newConfig = {
-                usage: evt.detail ? 'enabled' : 'none',
-            };
-            this.edit({ json: JSON.stringify({ ...json, postal_code_lookup: newConfig }) });
+            json.postal_code_lookup.usage = evt.detail ? 'enabled' : 'none';
+            this.edit({ json: JSON.stringify(json) });
         }}
             >
               <foxy-i18n lang=${lang} key="enable_postcode_lookup" ns=${ns}></foxy-i18n>
@@ -322,7 +305,7 @@ export class TemplateConfigForm extends Base {
     __renderLocations(json) {
         const { lang, ns } = this;
         const config = json.location_filtering;
-        const isDisabled = this.disabledSelector.matches('locations', true);
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('locations', true);
         const isReadonly = this.readonlySelector.matches('locations', true);
         const shippingChoice = config.shipping_filter_type === 'blacklist' ? 'block' : 'allow';
         const billingChoice = config.usage === 'both'
@@ -353,81 +336,85 @@ export class TemplateConfigForm extends Base {
             }
         };
         return html `
-      ${this.renderTemplateOrSlot('locations:before')}
-      <x-group frame>
-        <foxy-i18n
-          class=${isDisabled ? 'text-disabled' : ''}
-          slot="header"
-          lang=${lang}
-          key="location_plural"
-          ns=${ns}
-        >
-        </foxy-i18n>
+      <div data-testid="locations">
+        ${this.renderTemplateOrSlot('locations:before')}
-        <div class="grid sm-grid-cols-2 bg-contrast-10" style="gap: 1px">
-          <x-group class="bg-base pt-m">
-            <foxy-i18n
-              class=${isDisabled ? 'text-disabled' : 'text-tertiary'}
-              slot="header"
-              lang=${lang}
-              key="shipping"
-              ns=${ns}
-            >
-            </foxy-i18n>
+        <x-group frame>
+          <foxy-i18n
+            class=${isDisabled ? 'text-disabled' : ''}
+            slot="header"
+            lang=${lang}
+            key="location_plural"
+            ns=${ns}
+          >
+          </foxy-i18n>
-            <x-choice
-              .items=${['allow', 'block']}
-              .value=${shippingChoice}
-              ?disabled=${isDisabled}
-              ?readonly=${isReadonly}
-              @change=${(evt) => {
+          <div class="grid sm-grid-cols-2 bg-contrast-10" style="gap: 1px">
+            <x-group class="bg-base pt-m">
+              <foxy-i18n
+                class=${isDisabled ? 'text-disabled' : 'text-tertiary'}
+                slot="header"
+                lang=${lang}
+                key="shipping"
+                ns=${ns}
+              >
+              </foxy-i18n>
+              <x-choice
+                data-testid="locations-shipping-choice"
+                .items=${['allow', 'block']}
+                .value=${shippingChoice}
+                ?disabled=${isDisabled}
+                ?readonly=${isReadonly}
+                @change=${(evt) => {
             if (config.usage !== 'both')
                 config.usage = 'independent';
             config.shipping_filter_type = evt.detail === 'block' ? 'blacklist' : 'whitelist';
             normalize();
             this.edit({ json: JSON.stringify(json) });
         }}
-            >
-              <foxy-i18n slot="allow-label" lang=${lang} key="allowlist" ns=${ns}></foxy-i18n>
-              <foxy-i18n slot="block-label" lang=${lang} key="blocklist" ns=${ns}></foxy-i18n>
-              <x-countries-list
-                countries=${JSON.stringify(config.shipping_filter_values)}
-                regions=${this.regions}
-                class="mb-m"
-                href=${this.countries}
-                slot=${shippingChoice}
-                lang=${lang}
-                ns=${ns}
-                ?disabled=${isDisabled}
-                ?readonly=${isReadonly}
-                @update:countries=${(evt) => {
+              >
+                <foxy-i18n slot="allow-label" lang=${lang} key="allowlist" ns=${ns}></foxy-i18n>
+                <foxy-i18n slot="block-label" lang=${lang} key="blocklist" ns=${ns}></foxy-i18n>
+                <x-countries-list
+                  data-testid="locations-shipping-list"
+                  countries=${JSON.stringify(config.shipping_filter_values)}
+                  regions=${this.regions}
+                  class="mb-m"
+                  href=${this.countries}
+                  slot=${shippingChoice}
+                  lang=${lang}
+                  ns=${ns}
+                  ?disabled=${isDisabled}
+                  ?readonly=${isReadonly}
+                  @update:countries=${(evt) => {
             config.shipping_filter_values = evt.currentTarget.countries;
             normalize();
             this.edit({ json: JSON.stringify(json) });
         }}
-              >
-              </x-countries-list>
-            </x-choice>
-          </x-group>
+                >
+                </x-countries-list>
+              </x-choice>
+            </x-group>
-          <x-group class="bg-base pt-m">
-            <foxy-i18n
-              class=${isDisabled ? 'text-disabled' : 'text-tertiary'}
-              slot="header"
-              lang=${lang}
-              key="billing"
-              ns=${ns}
-            >
-            </foxy-i18n>
+            <x-group class="bg-base pt-m">
+              <foxy-i18n
+                class=${isDisabled ? 'text-disabled' : 'text-tertiary'}
+                slot="header"
+                lang=${lang}
+                key="billing"
+                ns=${ns}
+              >
+              </foxy-i18n>
-            <x-choice
-              .items=${['allow', 'block', 'copy']}
-              .value=${billingChoice}
-              ?disabled=${isDisabled}
-              ?readonly=${isReadonly}
-              @change=${(evt) => {
+              <x-choice
+                data-testid="locations-billing-choice"
+                .items=${['allow', 'block', 'copy']}
+                .value=${billingChoice}
+                ?disabled=${isDisabled}
+                ?readonly=${isReadonly}
+                @change=${(evt) => {
             if (evt.detail === 'copy') {
                 config.usage = 'both';
             }
@@ -438,35 +425,38 @@ export class TemplateConfigForm extends Base {
             normalize();
             this.edit({ json: JSON.stringify(json) });
         }}
-            >
-              <foxy-i18n slot="allow-label" lang=${lang} key="allowlist" ns=${ns}></foxy-i18n>
-              <foxy-i18n slot="block-label" lang=${lang} key="blocklist" ns=${ns}></foxy-i18n>
-              <foxy-i18n slot="copy-label" lang=${lang} key="same_as_shipping" ns=${ns}></foxy-i18n>
-              <x-countries-list
-                countries=${JSON.stringify(config.billing_filter_values)}
-                regions=${this.regions}
-                class="mb-m"
-                href=${this.countries}
-                slot=${billingChoice}
-                lang=${lang}
-                ns=${ns}
-                ?disabled=${isDisabled}
-                ?readonly=${isReadonly}
-                ?hidden=${billingChoice === 'copy'}
-                @update:countries=${(evt) => {
+              >
+                <foxy-i18n slot="allow-label" lang=${lang} key="allowlist" ns=${ns}></foxy-i18n>
+                <foxy-i18n slot="block-label" lang=${lang} key="blocklist" ns=${ns}></foxy-i18n>
+                <foxy-i18n slot="copy-label" lang=${lang} key="same_as_shipping" ns=${ns}>
+                </foxy-i18n>
+                <x-countries-list
+                  data-testid="locations-billing-list"
+                  countries=${JSON.stringify(config.billing_filter_values)}
+                  regions=${this.regions}
+                  class="mb-m"
+                  href=${this.countries}
+                  slot=${billingChoice}
+                  lang=${lang}
+                  ns=${ns}
+                  ?disabled=${isDisabled}
+                  ?readonly=${isReadonly}
+                  ?hidden=${billingChoice === 'copy'}
+                  @update:countries=${(evt) => {
             config.billing_filter_values = evt.currentTarget.countries;
             normalize();
             this.edit({ json: JSON.stringify(json) });
         }}
-              >
-              </x-countries-list>
-            </x-choice>
-          </x-group>
-        </div>
-      </x-group>
+                >
+                </x-countries-list>
+              </x-choice>
+            </x-group>
+          </div>
+        </x-group>
-      ${this.renderTemplateOrSlot('locations:after')}
+        ${this.renderTemplateOrSlot('locations:after')}
+      </div>
     `;
     }
     __renderHiddenFields(json) {