@foxy.io/elements 1.24.0-beta.4 → 1.24.0-beta.6

package/dist/cdn/translations/customer-portal-settings/en.json

@@ -70,6 +70,15 @@
     "title": "Enable Single Sign-On (SSO)",
     "subtitle": "Sync your sessions across your website and our checkout"
   },
+  "sign_up": {
+    "title": "Enable customer registration",
+    "subtitle": "Add a sign up form to your portal and enable the API",
+    "hcaptcha_explainer": "By default, Customer Portal uses Foxy's hCaptcha account to protect the sign up form. If you'd like to use your own hCaptcha account, please enter your site key and secret key above.",
+    "site_key_label": "hCaptcha site key",
+    "site_key_placeholder": "Use Foxy default",
+    "secret_key_label": "hCaptcha secret key",
+    "secret_key_placeholder": "Use Foxy default"
+  },
   "jwt": {
     "title": "JWT shared secret",
     "subtitle": "Reset this key to drop all active sessions",

package/dist/cdn/translations/transaction/en.json

@@ -88,21 +88,85 @@
           }
         },
         "customer-form": {
-          "cancel": "Cancel",
-          "confirm": "Confirm",
-          "create": "Create",
-          "date": "{{value, date}}",
-          "date_created": "Created on",
-          "date_modified": "Last updated",
-          "delete": "Delete",
-          "delete_prompt": "This resource will be permanently removed. Are you sure?",
-          "email": "Email",
-          "first_name": "First name",
-          "last_name": "Last name",
-          "tax_id": "Tax ID",
-          "v8n_invalid_email": "Invalid email",
-          "v8n_required": "Required",
-          "v8n_too_long": "Too long",
+          "message": {
+            "password_change_success": "You have successfully set a new password for {{ email }}.",
+            "close": "Close"
+          },
+          "error": {
+            "registration_disabled": "Customer registration is disabled for this store. If you're seeing this message as a customer, please contact the store owner.",
+            "verification_failed": "Client verification failed. If you are seeing this message as a customer, please contact the store owner.",
+            "email_already_used": "This email is already in use. Please use a different email."
+          },
+          "first-name": {
+            "label": "First name",
+            "placeholder": "Not set",
+            "helper_text": "Customer's given name, optional.",
+            "v8n_too_long": "We can't store first names longer than 50 characters."
+          },
+          "last-name": {
+            "label": "Last name",
+            "placeholder": "Not set",
+            "helper_text": "Customer's surname, optional.",
+            "v8n_too_long": "We can't store last names longer than 50 characters."
+          },
+          "tax-id": {
+            "label": "Tax ID",
+            "placeholder": "Not set",
+            "helper_text": "Tax identification number for this customer, optional.",
+            "v8n_too_long": "We can't store tax IDs longer than 50 characters."
+          },
+          "email": {
+            "label": "Email",
+            "placeholder": "Required",
+            "helper_text": "This email will be used as the login to the Checkout and Customer Portal.",
+            "helper_text_last_login_date": "This customer's login to the Checkout and Customer Portal. Last used on {{ date, date }} at {{ date, time }}.",
+            "v8n_too_long": "We can't store emails longer than 100 characters.",
+            "v8n_invalid_email": "This email is invalid.",
+            "v8n_required": "Please fill out this field."
+          },
+          "is-anonymous": {
+            "label": "Account type",
+            "helper_text": "Guest customers dont't have access to Customer Portal. Once the account type is set, it can not be changed.",
+            "option_true": "Guest",
+            "option_false": "Registered"
+          },
+          "password": {
+            "label": "Password",
+            "placeholder": "Required",
+            "placeholder_new": "Keep current password",
+            "helper_text": "Set a password for this customer. To generate a secure random password for this account, use the ✨ button.",
+            "helper_text_new": "To change this customer's password, enter a new password here. If you leave it blank, their password will remain the same.",
+            "v8n_too_long": "Please use a password that is no longer than 50 characters.",
+            "v8n_too_weak": "Please use a stronger password. To make this password stronger, make it at least 8 characters long and include a few upper and lower case letters, numbers, and special characters.",
+            "v8n_required": "Please fill out this field."
+          },
+          "password-old": {
+            "label": "Old password",
+            "placeholder": "",
+            "helper_text": "Enter the old password to set a new password. If you're a store admin, you can leave this field blank.",
+            "v8n_required": "Please fill out this field."
+          },
+          "forgot-password": {
+            "label": "One-time code",
+            "placeholder": "Not set",
+            "helper_text": "Set a one-time code that this customer can use instead of a password to sign in. Keep in mind that this code will expire after 30 minutes.",
+            "helper_text_expired_on": "A one-time code that this customer can use instead of a password to sign in. This code expired on {{ expiresOn, date }} at {{ expiresOn, time }}.",
+            "helper_text_expires_in": "A one-time code that this customer can use instead of a password to sign in. This code will expire in {{ expiresInMin, relative }}.",
+            "v8n_too_long": "Please use a code that is no longer than 50 characters."
+          },
+          "timestamps": {
+            "date_created": "Created on",
+            "date_modified": "Last updated",
+            "date": "{{value, date}}"
+          },
+          "delete": {
+            "delete": "Delete",
+            "cancel": "Cancel",
+            "delete_prompt": "This action is irreversible. Are you sure you want to delete this customer?"
+          },
+          "create": {
+            "create": "Create"
+          },
           "spinner": {
             "loading_busy": "Loading",
             "loading_error": "Failed to load"

package/dist/elements/internal/InternalForm/InternalForm.d.ts

@@ -1,5 +1,7 @@
+import type { PropertyDeclarations } from 'lit-element';
 import type { HALJSONResource } from '../../public/NucleonElement/types';
 import type { TemplateResult } from 'lit-html';
+import type { Status } from './types';
 import { NucleonElement } from '../../public/NucleonElement/NucleonElement';
 declare const Base: typeof NucleonElement & {
     styles: import("lit-element").CSSResultArray;
@@ -12,6 +14,11 @@ declare const Base: typeof NucleonElement & {
  * @since 1.17.0
  */
 export declare class InternalForm<TData extends HALJSONResource> extends Base<TData> {
+    /** Validation errors with this prefix will show up at the top of the form. */
+    static generalErrorPrefix: string;
+    static get properties(): PropertyDeclarations;
+    /** Status message to render at the top of the form. If `null`, the message is hidden. */
+    status: null | Status;
     /**
      * Renders form body. This is the method you should implement in your forms
      * instead of `.render()`. If you'd like to keep the submit button and the timestamps,
@@ -23,5 +30,8 @@ export declare class InternalForm<TData extends HALJSONResource> extends Base<TD
      * instead of this method in your form to keep the spinner and the common layout features.
      */
     render(): TemplateResult;
+    private get __generalErrors();
+    private __renderGeneralError;
+    private __renderStatus;
 }
 export {};

package/dist/elements/internal/InternalForm/InternalForm.js

@@ -12,6 +12,17 @@ const Base = ConfigurableMixin(ThemeableMixin(NucleonElement));
  * @since 1.17.0
  */
 export class InternalForm extends Base {
+    constructor() {
+        super(...arguments);
+        /** Status message to render at the top of the form. If `null`, the message is hidden. */
+        this.status = null;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            status: { type: Object },
+        };
+    }
     /**
      * Renders form body. This is the method you should implement in your forms
      * instead of `.render()`. If you'd like to keep the submit button and the timestamps,
@@ -40,7 +51,8 @@ export class InternalForm extends Base {
             'opacity-0 pointer-events-none': isSpinnerVisible,
         })}
         >
-          ${this.renderBody()}
+          ${this.__generalErrors.map(err => this.__renderGeneralError(err))}
+          ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}
         </div>
 
         <div
@@ -61,5 +73,40 @@ export class InternalForm extends Base {
       </div>
     `;
     }
+    get __generalErrors() {
+        const prefix = this.constructor.generalErrorPrefix;
+        return this.errors.filter(v => v.startsWith(prefix));
+    }
+    __renderGeneralError(err) {
+        return html `
+      <foxy-i18n
+        class="leading-xs text-body rounded bg-error-10 block"
+        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+        infer="error"
+        key=${err.replace('error:', '')}
+      >
+      </foxy-i18n>
+    `;
+    }
+    __renderStatus({ key, options }) {
+        return html `
+      <p
+        data-testid="status"
+        class="leading-xs text-body rounded bg-success-10 flex items-start gap-m"
+        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+      >
+        <foxy-i18n class="flex-1" infer="status" key=${key} .options=${options}></foxy-i18n>
+        <vaadin-button
+          class="flex-shrink-0"
+          theme="success tertiary-inline"
+          @click=${() => (this.status = null)}
+        >
+          <foxy-i18n class="flex-1" infer="status" key="close"></foxy-i18n>
+        </vaadin-button>
+      </p>
+    `;
+    }
 }
+/** Validation errors with this prefix will show up at the top of the form. */
+InternalForm.generalErrorPrefix = 'error:';
 //# sourceMappingURL=InternalForm.js.map

package/dist/elements/internal/InternalForm/InternalForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAE/D;;;;;;GAMG;AACH,MAAM,OAAO,YAA4C,SAAQ,IAAW;IAC1E;;;;OAIG;IACH,UAAU;QACR,OAAO,IAAI,CAAC,IAAI;YACd,CAAC,CAAC,IAAI,CAAA;;;SAGH;YACH,CAAC,CAAC,IAAI,CAAA,8EAA8E,CAAC;IACzF,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,MAAM,gBAAgB,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5F,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;kBAEpB,QAAQ,CAAC;YACf,wBAAwB,EAAE,IAAI;YAC9B,oBAAoB,EAAE,IAAI;YAC1B,+BAA+B,EAAE,gBAAgB;SAClD,CAAC;;YAEA,IAAI,CAAC,UAAU,EAAE;;;;;kBAKX,QAAQ,CAAC;YACf,0CAA0C,EAAE,IAAI;YAChD,+BAA+B,EAAE,CAAC,gBAAgB;SACnD,CAAC;;;qBAGS,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU;;oBAE1C,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;;;KAMjD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/**\n * An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n *\n * @element foxy-internal-form\n * @since 1.17.0\n */\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n  /**\n   * Renders form body. This is the method you should implement in your forms\n   * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n   * don't forget to add `super.renderBody()` to your template.\n   */\n  renderBody(): TemplateResult {\n    return this.data\n      ? html`\n          <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n          <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n        `\n      : html`<foxy-internal-create-control infer=\"create\"></foxy-internal-create-control>`;\n  }\n\n  /**\n   * Renders the entire form. You should probably implement `.renderBody()`\n   * instead of this method in your form to keep the spinner and the common layout features.\n   */\n  render(): TemplateResult {\n    const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) || !this.data);\n\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'grid grid-cols-1 gap-m': true,\n            'transition-opacity': true,\n            'opacity-0 pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          ${this.renderBody()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition-opacity absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('fail') ? 'vertical' : 'no-label'}\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAE/D;;;;;;GAMG;AACH,MAAM,OAAO,YAA4C,SAAQ,IAAW;IAA5E;;QAWE,yFAAyF;QACzF,WAAM,GAAkB,IAAI,CAAC;IA0F/B,CAAC;IAlGC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACzB,CAAC;IACJ,CAAC;IAKD;;;;OAIG;IACH,UAAU;QACR,OAAO,IAAI,CAAC,IAAI;YACd,CAAC,CAAC,IAAI,CAAA;;;SAGH;YACH,CAAC,CAAC,IAAI,CAAA,8EAA8E,CAAC;IACzF,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,MAAM,gBAAgB,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5F,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;kBAEpB,QAAQ,CAAC;YACf,wBAAwB,EAAE,IAAI;YAC9B,oBAAoB,EAAE,IAAI;YAC1B,+BAA+B,EAAE,gBAAgB;SAClD,CAAC;;YAEA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;YAC/D,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE;;;;;kBAKlE,QAAQ,CAAC;YACf,0CAA0C,EAAE,IAAI;YAChD,+BAA+B,EAAE,CAAC,gBAAgB;SACnD,CAAC;;;qBAGS,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU;;oBAE1C,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;;;KAMjD,CAAC;IACJ,CAAC;IAED,IAAY,eAAe;QACzB,MAAM,MAAM,GAAI,IAAI,CAAC,WAAmC,CAAC,kBAAkB,CAAC;QAC5E,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;IACvD,CAAC;IAEO,oBAAoB,CAAC,GAAW;QACtC,OAAO,IAAI,CAAA;;;;;cAKD,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC;;;KAGlC,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,EAAE,GAAG,EAAE,OAAO,EAAU;QAC7C,OAAO,IAAI,CAAA;;;;;;uDAMwC,GAAG,aAAa,OAAO;;;;mBAI3D,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;;;;;KAKxC,CAAC;IACJ,CAAC;;AApGD,8EAA8E;AACvE,+BAAkB,GAAG,QAAQ,CAAC","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/**\n * An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n *\n * @element foxy-internal-form\n * @since 1.17.0\n */\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n  /** Validation errors with this prefix will show up at the top of the form. */\n  static generalErrorPrefix = 'error:';\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      status: { type: Object },\n    };\n  }\n\n  /** Status message to render at the top of the form. If `null`, the message is hidden. */\n  status: null | Status = null;\n\n  /**\n   * Renders form body. This is the method you should implement in your forms\n   * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n   * don't forget to add `super.renderBody()` to your template.\n   */\n  renderBody(): TemplateResult {\n    return this.data\n      ? html`\n          <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n          <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n        `\n      : html`<foxy-internal-create-control infer=\"create\"></foxy-internal-create-control>`;\n  }\n\n  /**\n   * Renders the entire form. You should probably implement `.renderBody()`\n   * instead of this method in your form to keep the spinner and the common layout features.\n   */\n  render(): TemplateResult {\n    const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) || !this.data);\n\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'grid grid-cols-1 gap-m': true,\n            'transition-opacity': true,\n            'opacity-0 pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n          ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition-opacity absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('fail') ? 'vertical' : 'no-label'}\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private get __generalErrors() {\n    const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n    return this.errors.filter(v => v.startsWith(prefix));\n  }\n\n  private __renderGeneralError(err: string) {\n    return html`\n      <foxy-i18n\n        class=\"leading-xs text-body rounded bg-error-10 block\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n        infer=\"error\"\n        key=${err.replace('error:', '')}\n      >\n      </foxy-i18n>\n    `;\n  }\n\n  private __renderStatus({ key, options }: Status) {\n    return html`\n      <p\n        data-testid=\"status\"\n        class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n        <vaadin-button\n          class=\"flex-shrink-0\"\n          theme=\"success tertiary-inline\"\n          @click=${() => (this.status = null)}\n        >\n          <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n        </vaadin-button>\n      </p>\n    `;\n  }\n}\n"]}

package/dist/elements/internal/InternalForm/index.d.ts

@@ -1,3 +1,4 @@
+import '@vaadin/vaadin-button';
 import '../InternalTimestampsControl/index';
 import '../InternalCreateControl/index';
 import '../InternalDeleteControl/index';

package/dist/elements/internal/InternalForm/index.js

@@ -1,3 +1,4 @@
+import '@vaadin/vaadin-button';
 import "../InternalTimestampsControl/index.js";
 import "../InternalCreateControl/index.js";
 import "../InternalDeleteControl/index.js";

package/dist/elements/internal/InternalForm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/index.ts"],"names":[],"mappings":"AAAA,+CAA4C;AAC5C,2CAAwC;AACxC,2CAAwC;AAExC,uCAAoC;AAEpC,OAAO,EAAE,YAAY,EAAE,0BAAuB;AAE9C,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import '../InternalTimestampsControl/index';\nimport '../InternalCreateControl/index';\nimport '../InternalDeleteControl/index';\n\nimport '../../public/Spinner/index';\n\nimport { InternalForm } from './InternalForm';\n\ncustomElements.define('foxy-internal-form', InternalForm);\n\nexport { InternalForm };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,+CAA4C;AAC5C,2CAAwC;AACxC,2CAAwC;AAExC,uCAAoC;AAEpC,OAAO,EAAE,YAAY,EAAE,0BAAuB;AAE9C,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\n\nimport '../InternalTimestampsControl/index';\nimport '../InternalCreateControl/index';\nimport '../InternalDeleteControl/index';\n\nimport '../../public/Spinner/index';\n\nimport { InternalForm } from './InternalForm';\n\ncustomElements.define('foxy-internal-form', InternalForm);\n\nexport { InternalForm };\n"]}

package/dist/elements/internal/InternalForm/types.d.ts

@@ -0,0 +1,4 @@
+export declare type Status = {
+    key: string;
+    options?: unknown;
+};

package/dist/elements/internal/InternalForm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/elements/internal/InternalForm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/types.ts"],"names":[],"mappings":"","sourcesContent":["export type Status = { key: string; options?: unknown };\n"]}

package/dist/elements/internal/InternalPasswordControl/InternalPasswordControl.d.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult } from 'lit-element';
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
 /**
  * Internal control displaying a basic password box.
@@ -7,7 +7,11 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
  * @element foxy-internal-password-field-control
  */
 export declare class InternalPasswordControl extends InternalEditableControl {
+    static get properties(): PropertyDeclarations;
+    /** If true, renders the password generator button. */
+    showGenerator: boolean;
     renderControl(): TemplateResult;
     protected get _value(): string;
     protected set _value(newValue: string);
+    private __renderGenerator;
 }

package/dist/elements/internal/InternalPasswordControl/InternalPasswordControl.js

@@ -1,6 +1,8 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { generateRandomPassword } from "./generateRandomPassword.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html } from 'lit-element';
+import { html, svg } from 'lit-element';
+import { classMap } from "../../../utils/class-map.js";
 /**
  * Internal control displaying a basic password box.
  *
@@ -8,6 +10,17 @@ import { html } from 'lit-element';
  * @element foxy-internal-password-field-control
  */
 export class InternalPasswordControl extends InternalEditableControl {
+    constructor() {
+        super(...arguments);
+        /** If true, renders the password generator button. */
+        this.showGenerator = false;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            showGenerator: { type: Boolean, attribute: 'show-generator' },
+        };
+    }
     renderControl() {
         return html `
       <vaadin-password-field
@@ -26,6 +39,7 @@ export class InternalPasswordControl extends InternalEditableControl {
             this._value = area.value;
         }}
       >
+        ${this.showGenerator ? this.__renderGenerator() : ''}
       </vaadin-password-field>
     `;
     }
@@ -36,5 +50,26 @@ export class InternalPasswordControl extends InternalEditableControl {
     set _value(newValue) {
         super._value = newValue;
     }
+    __renderGenerator() {
+        return html `
+      <div
+        data-testid="generator"
+        class=${classMap({
+            'w-s h-s flex items-center justify-center cursor-default transition-colors': true,
+            'text-contrast-60 hover-text-contrast-80': !this.disabled && !this.readonly,
+            'text-contrast-20': this.disabled || this.readonly,
+        })}
+        slot="suffix"
+        @click=${() => {
+            this._value = generateRandomPassword();
+            const field = this.renderRoot.querySelector('vaadin-password-field');
+            // @ts-expect-error: this is a private method but it's ok since the version is fixed
+            field === null || field === void 0 ? void 0 : field._setPasswordVisible(true);
+        }}
+      >
+        ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1.15em; height: 1.15em"><path d="M15.98 1.804a1 1 0 00-1.96 0l-.24 1.192a1 1 0 01-.784.785l-1.192.238a1 1 0 000 1.962l1.192.238a1 1 0 01.785.785l.238 1.192a1 1 0 001.962 0l.238-1.192a1 1 0 01.785-.785l1.192-.238a1 1 0 000-1.962l-1.192-.238a1 1 0 01-.785-.785l-.238-1.192zM6.949 5.684a1 1 0 00-1.898 0l-.683 2.051a1 1 0 01-.633.633l-2.051.683a1 1 0 000 1.898l2.051.684a1 1 0 01.633.632l.683 2.051a1 1 0 001.898 0l.683-2.051a1 1 0 01.633-.633l2.051-.683a1 1 0 000-1.898l-2.051-.683a1 1 0 01-.633-.633L6.95 5.684zM13.949 13.684a1 1 0 00-1.898 0l-.184.551a1 1 0 01-.632.633l-.551.183a1 1 0 000 1.898l.551.183a1 1 0 01.633.633l.183.551a1 1 0 001.898 0l.184-.551a1 1 0 01.632-.633l.551-.183a1 1 0 000-1.898l-.551-.184a1 1 0 01-.633-.632l-.183-.551z" /></svg>`}
+      </div>
+    `;
+    }
 }
 //# sourceMappingURL=InternalPasswordControl.js.map

package/dist/elements/internal/InternalPasswordControl/InternalPasswordControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalPasswordControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/InternalPasswordControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,OAAO,uBAAwB,SAAQ,uBAAuB;IAClE,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;oBAEN,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;mBACT,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;iBACvE,CAAC,GAAgB,EAAE,EAAE;YAC5B,MAAM,IAAI,GAAG,GAAG,CAAC,aAAqC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,EAAE,CAAC;IACpD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;CACF","sourcesContent":["import type { PasswordFieldElement } from '@vaadin/vaadin-text-field/vaadin-password-field';\nimport type { TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a basic password box.\n *\n * @since 1.17.0\n * @element foxy-internal-password-field-control\n */\nexport class InternalPasswordControl extends InternalEditableControl {\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-password-field\n        error-message=${ifDefined(this._errorMessage)}\n        helper-text=${this.helperText}\n        placeholder=${this.placeholder}\n        label=${this.label}\n        class=\"w-full\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${this._value}\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @input=${(evt: CustomEvent) => {\n          const area = evt.currentTarget as PasswordFieldElement;\n          this._value = area.value;\n        }}\n      >\n      </vaadin-password-field>\n    `;\n  }\n\n  protected get _value(): string {\n    return (super._value as string | undefined) ?? '';\n  }\n\n  protected set _value(newValue: string) {\n    super._value = newValue as unknown | undefined;\n  }\n}\n"]}
+{"version":3,"file":"InternalPasswordControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/InternalPasswordControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,sBAAsB,EAAE,oCAAiC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,uBAAwB,SAAQ,uBAAuB;IAApE;;QAQE,sDAAsD;QACtD,kBAAa,GAAG,KAAK,CAAC;IAsDxB,CAAC;IA9DC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE;SAC9D,CAAC;IACJ,CAAC;IAKD,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;oBAEN,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;mBACT,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;iBACvE,CAAC,GAAgB,EAAE,EAAE;YAC5B,MAAM,IAAI,GAAG,GAAG,CAAC,aAAqC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,CAAC;;UAEC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE;;KAEvD,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,EAAE,CAAC;IACpD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,2EAA2E,EAAE,IAAI;YACjF,yCAAyC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC3E,kBAAkB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;SACnD,CAAC;;iBAEO,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,GAAG,sBAAsB,EAAE,CAAC;YACvC,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;YACrE,oFAAoF;YACpF,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,mBAAmB,CAAC,IAAI,EAAE;QACnC,CAAC;;UAEC,GAAG,CAAA,g1BAAg1B;;KAEx1B,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { PasswordFieldElement } from '@vaadin/vaadin-text-field/vaadin-password-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { generateRandomPassword } from './generateRandomPassword';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\n\n/**\n * Internal control displaying a basic password box.\n *\n * @since 1.17.0\n * @element foxy-internal-password-field-control\n */\nexport class InternalPasswordControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      showGenerator: { type: Boolean, attribute: 'show-generator' },\n    };\n  }\n\n  /** If true, renders the password generator button. */\n  showGenerator = false;\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-password-field\n        error-message=${ifDefined(this._errorMessage)}\n        helper-text=${this.helperText}\n        placeholder=${this.placeholder}\n        label=${this.label}\n        class=\"w-full\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${this._value}\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @input=${(evt: CustomEvent) => {\n          const area = evt.currentTarget as PasswordFieldElement;\n          this._value = area.value;\n        }}\n      >\n        ${this.showGenerator ? this.__renderGenerator() : ''}\n      </vaadin-password-field>\n    `;\n  }\n\n  protected get _value(): string {\n    return (super._value as string | undefined) ?? '';\n  }\n\n  protected set _value(newValue: string) {\n    super._value = newValue as unknown | undefined;\n  }\n\n  private __renderGenerator(): TemplateResult {\n    return html`\n      <div\n        data-testid=\"generator\"\n        class=${classMap({\n          'w-s h-s flex items-center justify-center cursor-default transition-colors': true,\n          'text-contrast-60 hover-text-contrast-80': !this.disabled && !this.readonly,\n          'text-contrast-20': this.disabled || this.readonly,\n        })}\n        slot=\"suffix\"\n        @click=${() => {\n          this._value = generateRandomPassword();\n          const field = this.renderRoot.querySelector('vaadin-password-field');\n          // @ts-expect-error: this is a private method but it's ok since the version is fixed\n          field?._setPasswordVisible(true);\n        }}\n      >\n        ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1.15em; height: 1.15em\"><path d=\"M15.98 1.804a1 1 0 00-1.96 0l-.24 1.192a1 1 0 01-.784.785l-1.192.238a1 1 0 000 1.962l1.192.238a1 1 0 01.785.785l.238 1.192a1 1 0 001.962 0l.238-1.192a1 1 0 01.785-.785l1.192-.238a1 1 0 000-1.962l-1.192-.238a1 1 0 01-.785-.785l-.238-1.192zM6.949 5.684a1 1 0 00-1.898 0l-.683 2.051a1 1 0 01-.633.633l-2.051.683a1 1 0 000 1.898l2.051.684a1 1 0 01.633.632l.683 2.051a1 1 0 001.898 0l.683-2.051a1 1 0 01.633-.633l2.051-.683a1 1 0 000-1.898l-2.051-.683a1 1 0 01-.633-.633L6.95 5.684zM13.949 13.684a1 1 0 00-1.898 0l-.184.551a1 1 0 01-.632.633l-.551.183a1 1 0 000 1.898l.551.183a1 1 0 01.633.633l.183.551a1 1 0 001.898 0l.184-.551a1 1 0 01.632-.633l.551-.183a1 1 0 000-1.898l-.551-.184a1 1 0 01-.633-.632l-.183-.551z\" /></svg>`}\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/internal/InternalPasswordControl/generateRandomPassword.d.ts

@@ -0,0 +1 @@
+export declare function generateRandomPassword(): string;

package/dist/elements/internal/InternalPasswordControl/generateRandomPassword.js

@@ -0,0 +1,11 @@
+export function generateRandomPassword() {
+    const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < 18; i++) {
+        if (i > 0 && i % 6 === 0)
+            result += '-';
+        result += charset[Math.floor(Math.random() * charset.length)];
+    }
+    return result;
+}
+//# sourceMappingURL=generateRandomPassword.js.map

package/dist/elements/internal/InternalPasswordControl/generateRandomPassword.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateRandomPassword.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/generateRandomPassword.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,sBAAsB;IACpC,MAAM,OAAO,GAAG,gEAAgE,CAAC;IACjF,IAAI,MAAM,GAAG,EAAE,CAAC;IAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE;QAC3B,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,MAAM,IAAI,GAAG,CAAC;QACxC,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;KAC/D;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["export function generateRandomPassword(): string {\n  const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n  let result = '';\n\n  for (let i = 0; i < 18; i++) {\n    if (i > 0 && i % 6 === 0) result += '-';\n    result += charset[Math.floor(Math.random() * charset.length)];\n  }\n\n  return result;\n}\n"]}

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

@@ -62,7 +62,8 @@ export declare class AddressForm extends Base<Data> {
     templates: Templates;
     private readonly __getValidator;
     private readonly __bindField;
-    private readonly __maybeRenderComboBox;
+    private readonly __maybeRenderCountry;
+    private readonly __maybeRenderRegion;
     private readonly __maybeRenderTextField;
     private readonly __renderTimestamps;
     private readonly __renderAction;

package/dist/elements/public/AddressForm/AddressForm.js

@@ -9,7 +9,6 @@ import { classMap } from "../../../utils/class-map.js";
 import { countries } from "./countries.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
 import memoize from 'lodash-es/memoize';
-import { regions } from "./regions.js";
 const NS = 'address-form';
 const Base = ScopedElementsMixin(ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS))));
 /**
@@ -69,40 +68,78 @@ export class AddressForm extends Base {
         });
         this.__bindField = memoize((key) => {
             return (evt) => {
-                const target = evt.target;
+                const target = evt.currentTarget;
                 this.edit({ [key]: target.value });
             };
         });
-        this.__maybeRenderComboBox = (params) => {
+        this.__maybeRenderCountry = () => {
             var _a, _b;
-            const { source, field, custom = false } = params;
-            const bsid = field.replace(/_/, '-');
-            if (this.hiddenSelector.matches(bsid))
+            const field = 'country';
+            if (this.hiddenSelector.matches(field))
                 return '';
-            const I18nElement = customElements.get('foxy-i18n');
-            const t = I18nElement.i18next.getFixedT(this.lang, field);
+            const source = Object.keys(countries);
             return html `
       <div>
-        ${this.renderTemplateOrSlot(`${bsid}:before`)}
+        ${this.renderTemplateOrSlot(`${field}:before`)}
 
         <vaadin-combo-box
           class="w-full"
           label=${this.t(field).toString()}
           value=${ifDefined((_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a[field]) === null || _b === void 0 ? void 0 : _b.toString())}
           error-message=${this.__getErrorMessage(field)}
-          data-testid=${bsid}
+          data-testid=${field}
           item-value-path="code"
           item-label-path="text"
           .checkValidity=${this.__getValidator(field)}
-          .items=${source.map(code => ({ text: t(code).toString(), code }))}
-          ?allow-custom-value=${custom}
-          ?readonly=${this.readonlySelector.matches(bsid, true)}
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid, true)}
+          .items=${source.map(code => ({
+                text: this.t(`country_${code.toLowerCase()}`),
+                code,
+            }))}
+          ?readonly=${this.readonlySelector.matches(field, true)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches(field, true)}
+          @change=${(evt) => {
+                const target = evt.currentTarget;
+                this.edit({ country: target.value, region: '' });
+            }}
+        >
+        </vaadin-combo-box>
+
+        ${this.renderTemplateOrSlot(`${field}:after`)}
+      </div>
+    `;
+        };
+        this.__maybeRenderRegion = () => {
+            var _a, _b, _c, _d, _e;
+            const field = 'region';
+            if (this.hiddenSelector.matches(field))
+                return '';
+            const source = (_b = countries[(_a = this.form.country) !== null && _a !== void 0 ? _a : '']) !== null && _b !== void 0 ? _b : [];
+            const country = (_c = this.form.country) !== null && _c !== void 0 ? _c : '';
+            return html `
+      <div>
+        ${this.renderTemplateOrSlot(`${field}:before`)}
+
+        <vaadin-combo-box
+          class="w-full"
+          label=${this.t(field).toString()}
+          value=${ifDefined((_e = (_d = this.form) === null || _d === void 0 ? void 0 : _d[field]) === null || _e === void 0 ? void 0 : _e.toString())}
+          error-message=${this.__getErrorMessage(field)}
+          data-testid=${field}
+          item-value-path="code"
+          item-label-path="text"
+          .checkValidity=${this.__getValidator(field)}
+          .items=${source.map(code => ({
+                text: this.t(`country_${country.toLowerCase()}_region_${code.toLowerCase()}`),
+                code,
+            }))}
+          ?allow-custom-value=${source.length === 0}
+          ?readonly=${this.readonlySelector.matches(field, true)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches(field, true)}
           @change=${this.__bindField(field)}
         >
         </vaadin-combo-box>
 
-        ${this.renderTemplateOrSlot(`${bsid}:after`)}
+        ${this.renderTemplateOrSlot(`${field}:after`)}
       </div>
     `;
         };
@@ -255,8 +292,7 @@ export class AddressForm extends Base {
           ${this.__maybeRenderTextField({ field: 'phone' })}
           ${this.__maybeRenderTextField({ field: 'address1', wide: true, required: true })}
           ${this.__maybeRenderTextField({ field: 'address2', wide: true })}
-          ${this.__maybeRenderComboBox({ field: 'country', source: countries })}
-          ${this.__maybeRenderComboBox({ field: 'region', source: regions, custom: true })}
+          ${this.__maybeRenderCountry()} ${this.__maybeRenderRegion()}
           ${this.__maybeRenderTextField({ field: 'city' })}
           ${this.__maybeRenderTextField({ field: 'postal_code' })}
         </div>