@foxy.io/elements 1.26.0-beta.2 → 1.27.0-beta.1

package/dist/elements/internal/InternalSourceControl/InternalSourceControl.js

@@ -10,12 +10,14 @@ import { repeat } from 'lit-html/directives/repeat';
 export class InternalSourceControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        this.__isErrorVisible = false;
         this.__hovered = false;
         this.__focused = false;
     }
     static get properties() {
         return {
             ...super.properties,
+            __isErrorVisible: { attribute: false },
             __hovered: { attribute: false },
             __focused: { attribute: false },
         };
@@ -110,20 +112,25 @@ textarea::selection{
           part="editor"
         >
           <div
-            class="h-full transition-colors monospace leading-s text-s p-m text-right border-r ${lineNumbersClass}"
+            class="h-full transition-colors monospace leading-s text-s text-right border-r ${lineNumbersClass}"
+            style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
           >
-            ${repeat((_a = this._value.split('\n')) !== null && _a !== void 0 ? _a : [], (_, i) => String(i), (_, i) => html `<div>${i + 1}</div>`)}
+            ${repeat((_a = this._value.split('\n')) !== null && _a !== void 0 ? _a : [], (_, i) => String(i), (_, i) => html `<div>${i < 9 ? html `<span class="opacity-0">0</span>` : ''}${i < 99 ? html `<span class="opacity-0">0</span>` : ''}<span>${i + 1}<span></div>`)}
           </div>
 
           <textarea
             placeholder=${this.placeholder}
-            class="bg-base whitespace-pre leading-s text-s focus-outline-none monospace resize-none p-m block w-full select-text transition-colors ${textAreaClass}"
+            class="bg-base whitespace-pre leading-s text-s focus-outline-none monospace resize-none block w-full select-text transition-colors ${textAreaClass}"
+            style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
             rows="1"
             .value=${this._value}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             @focus=${() => (this.__focused = true)}
-            @blur=${() => (this.__focused = false)}
+            @blur=${() => {
+            this.__focused = false;
+            this.__isErrorVisible = true;
+        }}
             @input=${(evt) => {
             const textarea = evt.currentTarget;
             this._value = textarea.value;
@@ -135,9 +142,17 @@ textarea::selection{
         <div
           class="mt-xs transition-colors leading-xs text-xs ${helperTextClass}"
           part="helper-text"
+          ?hidden=${!this.helperText}
         >
           ${this.helperText}
         </div>
+
+        <div
+          class="mt-xs text-xs leading-xs text-error"
+          ?hidden=${!this.__isErrorVisible || !this._errorMessage || this.disabled || this.readonly}
+        >
+          ${this._errorMessage}
+        </div>
       </label>
     `;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"InternalSourceControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSourceControl/InternalSourceControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\nimport { repeat } from 'lit-html/directives/repeat';\n\n/**\n * Internal control displaying editable source code.\n *\n * @since 1.23.0\n * @element foxy-internal-source-control\n */\nexport class InternalSourceControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __hovered: { attribute: false },\n      __focused: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        .monospace {\n          font-family: monospace;\n        }\n\n        .resize-none {\n          resize: none;\n        }\n\n        .max-h-16em {\n          max-height: 16em;\n        }\n\n        textarea::selection {\n          background: var(--lumo-contrast-10pct);\n        }\n      `,\n    ];\n  }\n\n  private __hovered = false;\n\n  private __focused = false;\n\n  renderControl(): TemplateResult {\n    let lineNumbersClass: string;\n    let helperTextClass: string;\n    let containerClass: string;\n    let textAreaClass: string;\n    let labelClass: string;\n\n    if (this.disabled) {\n      lineNumbersClass = 'bg-contrast-5 text-disabled';\n      helperTextClass = 'text-disabled';\n      textAreaClass = 'text-disabled';\n      labelClass = 'text-disabled';\n\n      if (this.readonly) {\n        lineNumbersClass += ' border-dashed border-contrast-20';\n        containerClass = 'border-dashed border-contrast-30';\n      } else {\n        lineNumbersClass += ' border-transparent';\n        containerClass = 'border-contrast-10';\n      }\n    } else if (this.readonly) {\n      lineNumbersClass = 'border-dashed border-contrast-30 bg-transparent text-secondary';\n      helperTextClass = 'text-secondary';\n      containerClass = 'border-dashed border-contrast-30';\n      textAreaClass = 'text-secondary';\n      labelClass = 'text-secondary';\n      if (this.__focused) containerClass += ' ring-2 ring-primary-50';\n    } else if (this.__focused) {\n      lineNumbersClass = 'border-transparent bg-contrast-10 text-tertiary';\n      helperTextClass = 'text-secondary';\n      containerClass = 'border-primary-50 ring-1 ring-primary-50';\n      textAreaClass = 'text-body';\n      labelClass = 'text-primary';\n    } else if (this.__hovered) {\n      lineNumbersClass = 'border-transparent bg-contrast-20 text-tertiary';\n      helperTextClass = 'text-body';\n      containerClass = 'border-contrast-20';\n      textAreaClass = 'text-body';\n      labelClass = 'text-body';\n    } else {\n      lineNumbersClass = 'border-transparent bg-contrast-10 text-tertiary';\n      helperTextClass = 'text-secondary';\n      containerClass = 'border-contrast-10';\n      textAreaClass = 'text-body';\n      labelClass = 'text-secondary';\n    }\n\n    return html`\n      <label\n        class=\"block h-full\"\n        @mouseenter=${() => (this.__hovered = true)}\n        @mouseleave=${() => (this.__hovered = false)}\n      >\n        <div\n          class=\"mb-xs transition-colors leading-none text-s font-medium ${labelClass}\"\n          part=\"label\"\n        >\n          ${this.label}\n        </div>\n\n        <div\n          class=\"max-h-16em h-full transition-colors flex-1 flex bg-base rounded overflow-auto border ${containerClass}\"\n          part=\"editor\"\n        >\n          <div\n            class=\"h-full transition-colors monospace leading-s text-s p-m text-right border-r ${lineNumbersClass}\"\n          >\n            ${repeat(\n              this._value.split('\\n') ?? [],\n              (_, i) => String(i),\n              (_, i) => html`<div>${i + 1}</div>`\n            )}\n          </div>\n\n          <textarea\n            placeholder=${this.placeholder}\n            class=\"bg-base whitespace-pre leading-s text-s focus-outline-none monospace resize-none p-m block w-full select-text transition-colors ${textAreaClass}\"\n            rows=\"1\"\n            .value=${this._value}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @focus=${() => (this.__focused = true)}\n            @blur=${() => (this.__focused = false)}\n            @input=${(evt: InputEvent) => {\n              const textarea = evt.currentTarget as HTMLTextAreaElement;\n              this._value = textarea.value;\n            }}\n          >\n          </textarea>\n        </div>\n\n        <div\n          class=\"mt-xs transition-colors leading-xs text-xs ${helperTextClass}\"\n          part=\"helper-text\"\n        >\n          ${this.helperText}\n        </div>\n      </label>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    this.renderRoot.querySelectorAll('textarea').forEach(textarea => {\n      textarea.style.height = 'auto';\n      textarea.style.height = `${textarea.scrollHeight}px`;\n      textarea.style.overflowY = 'hidden';\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":"InternalSourceControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSourceControl/InternalSourceControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\nimport { repeat } from 'lit-html/directives/repeat';\n\n/**\n * Internal control displaying editable source code.\n *\n * @since 1.23.0\n * @element foxy-internal-source-control\n */\nexport class InternalSourceControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __isErrorVisible: { attribute: false },\n      __hovered: { attribute: false },\n      __focused: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        .monospace {\n          font-family: monospace;\n        }\n\n        .resize-none {\n          resize: none;\n        }\n\n        .max-h-16em {\n          max-height: 16em;\n        }\n\n        textarea::selection {\n          background: var(--lumo-contrast-10pct);\n        }\n      `,\n    ];\n  }\n\n  private __isErrorVisible = false;\n\n  private __hovered = false;\n\n  private __focused = false;\n\n  renderControl(): TemplateResult {\n    let lineNumbersClass: string;\n    let helperTextClass: string;\n    let containerClass: string;\n    let textAreaClass: string;\n    let labelClass: string;\n\n    if (this.disabled) {\n      lineNumbersClass = 'bg-contrast-5 text-disabled';\n      helperTextClass = 'text-disabled';\n      textAreaClass = 'text-disabled';\n      labelClass = 'text-disabled';\n\n      if (this.readonly) {\n        lineNumbersClass += ' border-dashed border-contrast-20';\n        containerClass = 'border-dashed border-contrast-30';\n      } else {\n        lineNumbersClass += ' border-transparent';\n        containerClass = 'border-contrast-10';\n      }\n    } else if (this.readonly) {\n      lineNumbersClass = 'border-dashed border-contrast-30 bg-transparent text-secondary';\n      helperTextClass = 'text-secondary';\n      containerClass = 'border-dashed border-contrast-30';\n      textAreaClass = 'text-secondary';\n      labelClass = 'text-secondary';\n      if (this.__focused) containerClass += ' ring-2 ring-primary-50';\n    } else if (this.__focused) {\n      lineNumbersClass = 'border-transparent bg-contrast-10 text-tertiary';\n      helperTextClass = 'text-secondary';\n      containerClass = 'border-primary-50 ring-1 ring-primary-50';\n      textAreaClass = 'text-body';\n      labelClass = 'text-primary';\n    } else if (this.__hovered) {\n      lineNumbersClass = 'border-transparent bg-contrast-20 text-tertiary';\n      helperTextClass = 'text-body';\n      containerClass = 'border-contrast-20';\n      textAreaClass = 'text-body';\n      labelClass = 'text-body';\n    } else {\n      lineNumbersClass = 'border-transparent bg-contrast-10 text-tertiary';\n      helperTextClass = 'text-secondary';\n      containerClass = 'border-contrast-10';\n      textAreaClass = 'text-body';\n      labelClass = 'text-secondary';\n    }\n\n    return html`\n      <label\n        class=\"block h-full\"\n        @mouseenter=${() => (this.__hovered = true)}\n        @mouseleave=${() => (this.__hovered = false)}\n      >\n        <div\n          class=\"mb-xs transition-colors leading-none text-s font-medium ${labelClass}\"\n          part=\"label\"\n        >\n          ${this.label}\n        </div>\n\n        <div\n          class=\"max-h-16em h-full transition-colors flex-1 flex bg-base rounded overflow-auto border ${containerClass}\"\n          part=\"editor\"\n        >\n          <div\n            class=\"h-full transition-colors monospace leading-s text-s text-right border-r ${lineNumbersClass}\"\n            style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n          >\n            ${repeat(\n              this._value.split('\\n') ?? [],\n              (_, i) => String(i),\n              (_, i) =>\n                html`<div>${i < 9 ? html`<span class=\"opacity-0\">0</span>` : ''}${\n                  i < 99 ? html`<span class=\"opacity-0\">0</span>` : ''\n                }<span>${i + 1}<span></div>`\n            )}\n          </div>\n\n          <textarea\n            placeholder=${this.placeholder}\n            class=\"bg-base whitespace-pre leading-s text-s focus-outline-none monospace resize-none block w-full select-text transition-colors ${textAreaClass}\"\n            style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n            rows=\"1\"\n            .value=${this._value}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @focus=${() => (this.__focused = true)}\n            @blur=${() => {\n              this.__focused = false;\n              this.__isErrorVisible = true;\n            }}\n            @input=${(evt: InputEvent) => {\n              const textarea = evt.currentTarget as HTMLTextAreaElement;\n              this._value = textarea.value;\n            }}\n          >\n          </textarea>\n        </div>\n\n        <div\n          class=\"mt-xs transition-colors leading-xs text-xs ${helperTextClass}\"\n          part=\"helper-text\"\n          ?hidden=${!this.helperText}\n        >\n          ${this.helperText}\n        </div>\n\n        <div\n          class=\"mt-xs text-xs leading-xs text-error\"\n          ?hidden=${!this.__isErrorVisible || !this._errorMessage || this.disabled || this.readonly}\n        >\n          ${this._errorMessage}\n        </div>\n      </label>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    this.renderRoot.querySelectorAll('textarea').forEach(textarea => {\n      textarea.style.height = 'auto';\n      textarea.style.height = `${textarea.scrollHeight}px`;\n      textarea.style.overflowY = 'hidden';\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"]}

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

@@ -1,13 +1,11 @@
-import { Data, Templates } from './types';
-import { ScopedElementsMap } from '@open-wc/scoped-elements';
-import { TemplateResult } from 'lit-html';
-import { NucleonElement } from '../NucleonElement/NucleonElement';
-import { NucleonV8N } from '../NucleonElement/types';
-declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+import type { Data, Templates } from './types';
+import type { TemplateResult } from 'lit-html';
+import type { NucleonV8N } from '../NucleonElement/types';
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { InternalForm } from '../../internal/InternalForm/InternalForm';
+declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
-} & {
-    styles: import("lit-element").CSSResultArray;
-} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost>;
+};
 /**
  * Basic form displaying customer address.
  *
@@ -57,22 +55,13 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
  * @since 1.2.0
  */
 export declare class AddressForm extends Base<Data> {
-    static get scopedElements(): ScopedElementsMap;
     static get v8n(): NucleonV8N<Data>;
     templates: Templates;
-    private readonly __getValidator;
-    private readonly __bindField;
-    private readonly __maybeRenderCountry;
-    private readonly __maybeRenderRegion;
-    private readonly __maybeRenderTextField;
-    private readonly __renderTimestamps;
-    private readonly __renderAction;
-    connectedCallback(): void;
-    render(): TemplateResult;
-    disconnectedCallback(): void;
-    private __handleKeyDown;
-    private __getErrorMessage;
-    private __handleActionClick;
-    private __handleConfirmHide;
+    private __countrySetValue;
+    get readonlySelector(): BooleanSelector;
+    get disabledSelector(): BooleanSelector;
+    renderBody(): TemplateResult;
+    private get __countryOptions();
+    private get __regionOptions();
 }
 export {};

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

@@ -1,16 +1,10 @@
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
-import { html } from 'lit-html';
-import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { NucleonElement } from "../NucleonElement/NucleonElement.js";
-import { Metadata } from "../../private/Metadata/Metadata.js";
-import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { classMap } from "../../../utils/class-map.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
 import { countries } from "./countries.js";
-import { ifDefined } from 'lit-html/directives/if-defined';
-import memoize from 'lodash-es/memoize';
+import { html } from 'lit-html';
 const NS = 'address-form';
-const Base = ScopedElementsMixin(ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS))));
+const Base = TranslatableMixin(InternalForm, NS);
 /**
  * Basic form displaying customer address.
  *
@@ -63,287 +57,94 @@ export class AddressForm extends Base {
     constructor() {
         super(...arguments);
         this.templates = {};
-        this.__getValidator = memoize((prefix) => () => {
-            return !this.errors.some(err => err.startsWith(prefix));
-        });
-        this.__bindField = memoize((key) => {
-            return (evt) => {
-                const target = evt.currentTarget;
-                this.edit({ [key]: target.value });
-            };
-        });
-        this.__maybeRenderCountry = () => {
-            var _a, _b;
-            const field = 'country';
-            if (this.hiddenSelector.matches(field))
-                return '';
-            const source = Object.keys(countries);
-            return html `
-      <div>
-        ${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=${field}
-          item-value-path="code"
-          item-label-path="text"
-          .checkValidity=${this.__getValidator(field)}
-          .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(`${field}:after`)}
-      </div>
-    `;
-        };
-        this.__maybeRenderTextField = (params) => {
-            var _a, _b;
-            const { field, wide = false, readonly = false, required = false } = params;
-            const bsid = field.replace(/_/, '-').replace('1', '-one').replace('2', '-two');
-            if (this.hiddenSelector.matches(bsid))
-                return '';
-            return html `
-      <div class=${classMap({ 'col-span-2': wide })}>
-        ${this.renderTemplateOrSlot(`${bsid}:before`)}
-
-        <vaadin-text-field
-          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}
-          .checkValidity=${this.__getValidator(field)}
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid)}
-          ?required=${required}
-          ?readonly=${readonly || this.readonlySelector.matches(bsid)}
-          @input=${this.__bindField(field)}
-          @keydown=${this.__handleKeyDown}
-        >
-        </vaadin-text-field>
-
-        ${this.renderTemplateOrSlot(`${bsid}:after`)}
-      </div>
-    `;
-        };
-        this.__renderTimestamps = () => {
-            const items = ['date_modified', 'date_created'].map(field => {
-                var _a;
-                return ({
-                    name: this.t(field),
-                    value: ((_a = this.data) === null || _a === void 0 ? void 0 : _a[field]) ? this.t('date', { value: new Date(this.data[field]) })
-                        : '',
-                });
-            });
-            return html `
-      <div>
-        ${this.renderTemplateOrSlot('timestamps:before')}
-        <x-metadata .items=${items} data-testid="timestamps"></x-metadata>
-        ${this.renderTemplateOrSlot('timestamps:after')}
-      </div>
-    `;
-        };
-        this.__renderAction = (action) => {
-            var _a, _b;
-            const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });
-            const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });
-            const isDisabled = !this.in('idle') || this.disabledSelector.matches(action, true);
-            const isDefaultShipping = !!((_a = this.form) === null || _a === void 0 ? void 0 : _a.is_default_shipping);
-            const isDefaultBilling = !!((_b = this.form) === null || _b === void 0 ? void 0 : _b.is_default_billing);
-            const isDefault = isDefaultShipping || isDefaultBilling;
-            const isValid = isTemplateValid || isSnapshotValid;
-            return html `
-      <div>
-        ${this.renderTemplateOrSlot(`${action}:before`)}
-
-        <vaadin-button
-          class="w-full"
-          theme=${this.in('idle') ? `${this.href ? 'error' : 'primary success'}` : ''}
-          data-testid=${action}
-          ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled || isDefault}
-          @click=${this.__handleActionClick}
-        >
-          <foxy-i18n ns=${this.ns} key=${action} lang=${this.lang}></foxy-i18n>
-        </vaadin-button>
-
-        ${this.renderTemplateOrSlot(`${action}:after`)}
-      </div>
-    `;
-        };
-    }
-    static get scopedElements() {
-        return {
-            'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),
-            'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
-            'vaadin-text-field': customElements.get('vaadin-text-field'),
-            'vaadin-combo-box': customElements.get('vaadin-combo-box'),
-            'x-metadata': Metadata,
-            'vaadin-button': customElements.get('vaadin-button'),
-            'foxy-spinner': customElements.get('foxy-spinner'),
-            'foxy-i18n': customElements.get('foxy-i18n'),
+        this.__countrySetValue = (newValue) => {
+            this.edit({ country: newValue, region: '' });
         };
     }
     static get v8n() {
         return [
-            ({ address_name: v }) => (v && v.length > 0) || 'address_name_required',
-            ({ address_name: v }) => !v || v.length <= 100 || 'address_name_too_long',
-            ({ first_name: v }) => !v || v.length <= 50 || 'first_name_too_long',
-            ({ last_name: v }) => !v || v.length <= 50 || 'last_name_too_long',
-            ({ region: v }) => !v || v.length <= 50 || 'region_too_long',
-            ({ city: v }) => !v || v.length <= 50 || 'city_too_long',
-            ({ phone: v }) => !v || v.length <= 50 || 'phone_too_long',
-            ({ company: v }) => !v || v.length <= 50 || 'company_too_long',
-            ({ address2: v }) => !v || v.length <= 100 || 'address2_too_long',
-            ({ address1: v }) => (v && v.length > 0) || 'address1_required',
-            ({ address1: v }) => (v && v.length <= 100) || 'address1_too_long',
-            ({ postal_code: v }) => !v || v.length <= 50 || 'postal_code_too_long',
+            ({ address_name: v }) => (v && v.length > 0) || 'address-name:v8n_required',
+            ({ address_name: v }) => !v || v.length <= 100 || 'address-name:v8n_too_long',
+            ({ first_name: v }) => !v || v.length <= 50 || 'first-name:v8n_too_long',
+            ({ last_name: v }) => !v || v.length <= 50 || 'last-name:v8n_too_long',
+            ({ region: v }) => !v || v.length <= 50 || 'region:v8n_too_long',
+            ({ city: v }) => !v || v.length <= 50 || 'city:v8n_too_long',
+            ({ phone: v }) => !v || v.length <= 50 || 'phone:v8n_too_long',
+            ({ company: v }) => !v || v.length <= 50 || 'company:v8n_too_long',
+            ({ address2: v }) => !v || v.length <= 100 || 'address-two:v8n_too_long',
+            ({ address1: v }) => (v && v.length > 0) || 'address-one:v8n_required',
+            ({ address1: v }) => !v || v.length <= 100 || 'address-one:v8n_too_long',
+            ({ postal_code: v }) => !v || v.length <= 50 || 'postal-code:v8n_too_long',
         ];
     }
-    connectedCallback() {
-        super.connectedCallback();
-        customElements.get('foxy-i18n').i18next.loadNamespaces(['country', 'region']);
+    get readonlySelector() {
+        var _a, _b;
+        const alwaysReadonly = [super.readonlySelector.toString()];
+        const isDefault = !!((_a = this.data) === null || _a === void 0 ? void 0 : _a.is_default_shipping) || !!((_b = this.data) === null || _b === void 0 ? void 0 : _b.is_default_billing);
+        if (isDefault)
+            alwaysReadonly.unshift('address-name');
+        return new BooleanSelector(alwaysReadonly.join(' ').trim());
+    }
+    get disabledSelector() {
+        var _a, _b;
+        const alwaysDisabled = [super.disabledSelector.toString()];
+        const isDefault = !!((_a = this.data) === null || _a === void 0 ? void 0 : _a.is_default_shipping) || !!((_b = this.data) === null || _b === void 0 ? void 0 : _b.is_default_billing);
+        if (isDefault)
+            alwaysDisabled.unshift('delete');
+        return new BooleanSelector(alwaysDisabled.join(' ').trim());
     }
-    render() {
-        var _a, _b, _c, _d;
-        const { hiddenSelector, lang, ns } = this;
-        const action = this.href ? 'delete' : 'create';
-        const isDefaultShipping = !!((_a = this.form) === null || _a === void 0 ? void 0 : _a.is_default_shipping);
-        const isDefaultBilling = !!((_b = this.form) === null || _b === void 0 ? void 0 : _b.is_default_billing);
-        const isDefault = isDefaultShipping || isDefaultBilling;
-        const isBusy = this.in('busy');
-        const isFail = this.in('fail');
+    renderBody() {
+        const regionOptions = this.__regionOptions;
         return html `
-      <foxy-internal-confirm-dialog
-        message="delete_prompt"
-        confirm="delete"
-        cancel="cancel"
-        header="delete"
-        theme="primary error"
-        lang=${lang}
-        ns=${ns}
-        id="confirm"
-        data-testid="confirm"
-        @hide=${this.__handleConfirmHide}
-      >
-      </foxy-internal-confirm-dialog>
+      <div class="grid grid-cols-2 gap-m">
+        <foxy-internal-text-control class="col-span-2" infer="address-name">
+        </foxy-internal-text-control>
+
+        <foxy-internal-text-control infer="first-name"></foxy-internal-text-control>
+        <foxy-internal-text-control infer="last-name"></foxy-internal-text-control>
+        <foxy-internal-text-control infer="company"></foxy-internal-text-control>
+        <foxy-internal-text-control infer="phone"></foxy-internal-text-control>
 
-      <div
-        class="space-y-l font-lumo text-m leading-m text-body relative"
-        aria-busy=${this.in('busy')}
-        aria-live="polite"
-        data-testid="wrapper"
-      >
-        <div class="grid grid-cols-2 gap-m">
-          ${this.__maybeRenderTextField({
-            field: 'address_name',
-            wide: true,
-            readonly: isDefault,
-            required: true,
-        })}
-          ${this.__maybeRenderTextField({ field: 'first_name' })}
-          ${this.__maybeRenderTextField({ field: 'last_name' })}
-          ${this.__maybeRenderTextField({ field: 'company' })}
-          ${this.__maybeRenderTextField({ field: 'phone' })}
-          ${this.__maybeRenderTextField({ field: 'address1', wide: true, required: true })}
-          ${this.__maybeRenderTextField({ field: 'address2', wide: true })}
-          ${this.__maybeRenderCountry()} ${this.__maybeRenderRegion()}
-          ${this.__maybeRenderTextField({ field: 'city' })}
-          ${this.__maybeRenderTextField({ field: 'postal_code' })}
-        </div>
+        <foxy-internal-text-control class="col-span-2" infer="address-one" property="address1">
+        </foxy-internal-text-control>
 
-        ${!this.data || hiddenSelector.matches('timestamps', true) ? '' : this.__renderTimestamps()}
-        ${hiddenSelector.matches(action, true) ? '' : this.__renderAction(action)}
+        <foxy-internal-text-control class="col-span-2" infer="address-two" property="address2">
+        </foxy-internal-text-control>
 
-        <div
-          data-testid="spinner"
-          class=${classMap({
-            'transition duration-500 ease-in-out absolute inset-0 flex': true,
-            'opacity-0 pointer-events-none': !isBusy && !isFail,
-        })}
+        <foxy-internal-select-control
+          infer="country"
+          .options=${this.__countryOptions}
+          .setValue=${this.__countrySetValue}
         >
-          <foxy-spinner
-            layout="vertical"
-            class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l"
-            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}
-            lang=${lang}
-            ns="${this.ns} ${(_d = (_c = customElements.get('foxy-spinner')) === null || _c === void 0 ? void 0 : _c.defaultNS) !== null && _d !== void 0 ? _d : ''}"
-          >
-          </foxy-spinner>
-        </div>
+        </foxy-internal-select-control>
+
+        ${regionOptions.length > 0
+            ? html `
+              <foxy-internal-select-control infer="region" .options=${regionOptions}>
+              </foxy-internal-select-control>
+            `
+            : html `<foxy-internal-text-control infer="region"></foxy-internal-text-control>`}
+
+        <foxy-internal-text-control infer="city"></foxy-internal-text-control>
+        <foxy-internal-text-control infer="postal-code"></foxy-internal-text-control>
       </div>
+      ${super.renderBody()}
     `;
     }
-    disconnectedCallback() {
-        var _a, _b;
-        super.disconnectedCallback();
-        (_b = (_a = this.__getValidator.cache).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
-    }
-    __handleKeyDown(evt) {
-        if (evt.key === 'Enter')
-            this.submit();
-    }
-    __getErrorMessage(prefix) {
-        const error = this.errors.find(err => err.startsWith(prefix));
-        return error ? this.t(error.replace(prefix, 'v8n')).toString() : '';
+    get __countryOptions() {
+        return Object.keys(countries).map(code => ({
+            label: this.t(`country_${code.toLowerCase()}`),
+            value: code,
+        }));
     }
-    __handleActionClick(evt) {
-        if (this.in({ idle: 'snapshot' })) {
-            const confirm = this.renderRoot.querySelector('#confirm');
-            confirm.show(evt.currentTarget);
-        }
-        else {
-            this.submit();
-        }
-    }
-    __handleConfirmHide(evt) {
-        if (!evt.detail.cancelled)
-            this.delete();
+    get __regionOptions() {
+        var _a, _b;
+        const country = (_a = this.form.country) !== null && _a !== void 0 ? _a : '';
+        const source = (_b = countries[country]) !== null && _b !== void 0 ? _b : [];
+        return source.map(code => ({
+            label: this.t(`country_${country.toLowerCase()}_region_${code.toLowerCase()}`),
+            value: code,
+        }));
     }
 }
 //# sourceMappingURL=AddressForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddressForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AddressForm/AddressForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates, TextFieldParams } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { Metadata } from '../../private/Metadata/Metadata';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { countries } from './countries';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport memoize from 'lodash-es/memoize';\n\nconst NS = 'address-form';\nconst Base = ScopedElementsMixin(\n  ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Basic form displaying customer address.\n *\n * @slot address-name:before - **new in v1.4.0**\n * @slot address-name:after - **new in v1.4.0**\n *\n * @slot first-name:before - **new in v1.4.0**\n * @slot first-name:after - **new in v1.4.0**\n *\n * @slot last-name:before - **new in v1.4.0**\n * @slot last-name:after - **new in v1.4.0**\n *\n * @slot region:before - **new in v1.4.0**\n * @slot region:after - **new in v1.4.0**\n *\n * @slot city:before - **new in v1.4.0**\n * @slot city:after - **new in v1.4.0**\n *\n * @slot phone:before - **new in v1.4.0**\n * @slot phone:after - **new in v1.4.0**\n *\n * @slot company:before - **new in v1.4.0**\n * @slot company:after - **new in v1.4.0**\n *\n * @slot address-one:before - **new in v1.4.0**\n * @slot address-one:after - **new in v1.4.0**\n *\n * @slot address-two:before - **new in v1.4.0**\n * @slot address-two:after - **new in v1.4.0**\n *\n * @slot country:before - **new in v1.4.0**\n * @slot country:after - **new in v1.4.0**\n *\n * @slot postal-code:before - **new in v1.4.0**\n * @slot postal-code:after - **new in v1.4.0**\n *\n * @slot timestamps:before - **new in v1.4.0**\n * @slot timestamps:after - **new in v1.4.0**\n *\n * @slot create:before - **new in v1.4.0**\n * @slot create:after - **new in v1.4.0**\n *\n * @slot delete:before - **new in v1.4.0**\n * @slot delete:after - **new in v1.4.0**\n *\n * @element foxy-address-form\n * @since 1.2.0\n */\nexport class AddressForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'vaadin-combo-box': customElements.get('vaadin-combo-box'),\n      'x-metadata': Metadata,\n      'vaadin-button': customElements.get('vaadin-button'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ address_name: v }) => (v && v.length > 0) || 'address_name_required',\n      ({ address_name: v }) => !v || v.length <= 100 || 'address_name_too_long',\n      ({ first_name: v }) => !v || v.length <= 50 || 'first_name_too_long',\n      ({ last_name: v }) => !v || v.length <= 50 || 'last_name_too_long',\n      ({ region: v }) => !v || v.length <= 50 || 'region_too_long',\n      ({ city: v }) => !v || v.length <= 50 || 'city_too_long',\n      ({ phone: v }) => !v || v.length <= 50 || 'phone_too_long',\n      ({ company: v }) => !v || v.length <= 50 || 'company_too_long',\n      ({ address2: v }) => !v || v.length <= 100 || 'address2_too_long',\n      ({ address1: v }) => (v && v.length > 0) || 'address1_required',\n      ({ address1: v }) => (v && v.length <= 100) || 'address1_too_long',\n      ({ postal_code: v }) => !v || v.length <= 50 || 'postal_code_too_long',\n    ];\n  }\n\n  templates: Templates = {};\n\n  private readonly __getValidator = memoize((prefix: string) => () => {\n    return !this.errors.some(err => err.startsWith(prefix));\n  });\n\n  private readonly __bindField = memoize((key: keyof Data) => {\n    return (evt: CustomEvent) => {\n      const target = evt.currentTarget as HTMLInputElement;\n      this.edit({ [key]: target.value });\n    };\n  });\n\n  private readonly __maybeRenderCountry = () => {\n    const field = 'country';\n    if (this.hiddenSelector.matches(field)) return '';\n    const source = Object.keys(countries);\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${field}:before`)}\n\n        <vaadin-combo-box\n          class=\"w-full\"\n          label=${this.t(field).toString()}\n          value=${ifDefined(this.form?.[field]?.toString())}\n          error-message=${this.__getErrorMessage(field)}\n          data-testid=${field}\n          item-value-path=\"code\"\n          item-label-path=\"text\"\n          .checkValidity=${this.__getValidator(field)}\n          .items=${source.map(code => ({\n            text: this.t(`country_${code.toLowerCase()}`),\n            code,\n          }))}\n          ?readonly=${this.readonlySelector.matches(field, true)}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(field, true)}\n          @change=${(evt: CustomEvent) => {\n            const target = evt.currentTarget as HTMLInputElement;\n            this.edit({ country: target.value, region: '' });\n          }}\n        >\n        </vaadin-combo-box>\n\n        ${this.renderTemplateOrSlot(`${field}:after`)}\n      </div>\n    `;\n  };\n\n  private readonly __maybeRenderRegion = () => {\n    const field = 'region';\n    if (this.hiddenSelector.matches(field)) return '';\n    const source = countries[this.form.country ?? ''] ?? [];\n    const country = this.form.country ?? '';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${field}:before`)}\n\n        <vaadin-combo-box\n          class=\"w-full\"\n          label=${this.t(field).toString()}\n          value=${ifDefined(this.form?.[field]?.toString())}\n          error-message=${this.__getErrorMessage(field)}\n          data-testid=${field}\n          item-value-path=\"code\"\n          item-label-path=\"text\"\n          .checkValidity=${this.__getValidator(field)}\n          .items=${source.map(code => ({\n            text: this.t(`country_${country.toLowerCase()}_region_${code.toLowerCase()}`),\n            code,\n          }))}\n          ?allow-custom-value=${source.length === 0}\n          ?readonly=${this.readonlySelector.matches(field, true)}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(field, true)}\n          @change=${this.__bindField(field)}\n        >\n        </vaadin-combo-box>\n\n        ${this.renderTemplateOrSlot(`${field}:after`)}\n      </div>\n    `;\n  };\n\n  private readonly __maybeRenderTextField = (params: TextFieldParams) => {\n    const { field, wide = false, readonly = false, required = false } = params;\n    const bsid = field.replace(/_/, '-').replace('1', '-one').replace('2', '-two');\n    if (this.hiddenSelector.matches(bsid)) return '';\n\n    return html`\n      <div class=${classMap({ 'col-span-2': wide })}>\n        ${this.renderTemplateOrSlot(`${bsid}:before`)}\n\n        <vaadin-text-field\n          class=\"w-full\"\n          label=${this.t(field).toString()}\n          value=${ifDefined(this.form?.[field]?.toString())}\n          error-message=${this.__getErrorMessage(field)}\n          data-testid=${bsid}\n          .checkValidity=${this.__getValidator(field)}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid)}\n          ?required=${required}\n          ?readonly=${readonly || this.readonlySelector.matches(bsid)}\n          @input=${this.__bindField(field)}\n          @keydown=${this.__handleKeyDown}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot(`${bsid}:after`)}\n      </div>\n    `;\n  };\n\n  private readonly __renderTimestamps = () => {\n    const items = (['date_modified', 'date_created'] as const).map(field => ({\n      name: this.t(field),\n      value: this.data?.[field]\n        ? this.t('date', { value: new Date(this.data[field] as string) })\n        : '',\n    }));\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('timestamps:before')}\n        <x-metadata .items=${items} data-testid=\"timestamps\"></x-metadata>\n        ${this.renderTemplateOrSlot('timestamps:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderAction = (action: string) => {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isDisabled = !this.in('idle') || this.disabledSelector.matches(action, true);\n    const isDefaultShipping = !!this.form?.is_default_shipping;\n    const isDefaultBilling = !!this.form?.is_default_billing;\n    const isDefault = isDefaultShipping || isDefaultBilling;\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${action}:before`)}\n\n        <vaadin-button\n          class=\"w-full\"\n          theme=${this.in('idle') ? `${this.href ? 'error' : 'primary success'}` : ''}\n          data-testid=${action}\n          ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled || isDefault}\n          @click=${this.__handleActionClick}\n        >\n          <foxy-i18n ns=${this.ns} key=${action} lang=${this.lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot(`${action}:after`)}\n      </div>\n    `;\n  };\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    customElements.get('foxy-i18n').i18next.loadNamespaces(['country', 'region']);\n  }\n\n  render(): TemplateResult {\n    const { hiddenSelector, lang, ns } = this;\n    const action = this.href ? 'delete' : 'create';\n\n    const isDefaultShipping = !!this.form?.is_default_shipping;\n    const isDefaultBilling = !!this.form?.is_default_billing;\n    const isDefault = isDefaultShipping || isDefaultBilling;\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n\n    return html`\n      <foxy-internal-confirm-dialog\n        message=\"delete_prompt\"\n        confirm=\"delete\"\n        cancel=\"cancel\"\n        header=\"delete\"\n        theme=\"primary error\"\n        lang=${lang}\n        ns=${ns}\n        id=\"confirm\"\n        data-testid=\"confirm\"\n        @hide=${this.__handleConfirmHide}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div\n        class=\"space-y-l font-lumo text-m leading-m text-body relative\"\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        data-testid=\"wrapper\"\n      >\n        <div class=\"grid grid-cols-2 gap-m\">\n          ${this.__maybeRenderTextField({\n            field: 'address_name',\n            wide: true,\n            readonly: isDefault,\n            required: true,\n          })}\n          ${this.__maybeRenderTextField({ field: 'first_name' })}\n          ${this.__maybeRenderTextField({ field: 'last_name' })}\n          ${this.__maybeRenderTextField({ field: 'company' })}\n          ${this.__maybeRenderTextField({ field: 'phone' })}\n          ${this.__maybeRenderTextField({ field: 'address1', wide: true, required: true })}\n          ${this.__maybeRenderTextField({ field: 'address2', wide: true })}\n          ${this.__maybeRenderCountry()} ${this.__maybeRenderRegion()}\n          ${this.__maybeRenderTextField({ field: 'city' })}\n          ${this.__maybeRenderTextField({ field: 'postal_code' })}\n        </div>\n\n        ${!this.data || hiddenSelector.matches('timestamps', true) ? '' : this.__renderTimestamps()}\n        ${hiddenSelector.matches(action, true) ? '' : this.__renderAction(action)}\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition duration-500 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}\n            lang=${lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__getValidator.cache.clear?.();\n  }\n\n  private __handleKeyDown(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') this.submit();\n  }\n\n  private __getErrorMessage(prefix: string) {\n    const error = this.errors.find(err => err.startsWith(prefix));\n    return error ? this.t(error.replace(prefix, 'v8n')).toString() : '';\n  }\n\n  private __handleActionClick(evt: Event) {\n    if (this.in({ idle: 'snapshot' })) {\n      const confirm = this.renderRoot.querySelector('#confirm');\n      (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n    } else {\n      this.submit();\n    }\n  }\n\n  private __handleConfirmHide(evt: DialogHideEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n}\n"]}
+{"version":3,"file":"AddressForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AddressForm/AddressForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Data, Templates } from './types';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { countries } from './countries';\nimport { html } from 'lit-html';\n\nconst NS = 'address-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Basic form displaying customer address.\n *\n * @slot address-name:before - **new in v1.4.0**\n * @slot address-name:after - **new in v1.4.0**\n *\n * @slot first-name:before - **new in v1.4.0**\n * @slot first-name:after - **new in v1.4.0**\n *\n * @slot last-name:before - **new in v1.4.0**\n * @slot last-name:after - **new in v1.4.0**\n *\n * @slot region:before - **new in v1.4.0**\n * @slot region:after - **new in v1.4.0**\n *\n * @slot city:before - **new in v1.4.0**\n * @slot city:after - **new in v1.4.0**\n *\n * @slot phone:before - **new in v1.4.0**\n * @slot phone:after - **new in v1.4.0**\n *\n * @slot company:before - **new in v1.4.0**\n * @slot company:after - **new in v1.4.0**\n *\n * @slot address-one:before - **new in v1.4.0**\n * @slot address-one:after - **new in v1.4.0**\n *\n * @slot address-two:before - **new in v1.4.0**\n * @slot address-two:after - **new in v1.4.0**\n *\n * @slot country:before - **new in v1.4.0**\n * @slot country:after - **new in v1.4.0**\n *\n * @slot postal-code:before - **new in v1.4.0**\n * @slot postal-code:after - **new in v1.4.0**\n *\n * @slot timestamps:before - **new in v1.4.0**\n * @slot timestamps:after - **new in v1.4.0**\n *\n * @slot create:before - **new in v1.4.0**\n * @slot create:after - **new in v1.4.0**\n *\n * @slot delete:before - **new in v1.4.0**\n * @slot delete:after - **new in v1.4.0**\n *\n * @element foxy-address-form\n * @since 1.2.0\n */\nexport class AddressForm extends Base<Data> {\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ address_name: v }) => (v && v.length > 0) || 'address-name:v8n_required',\n      ({ address_name: v }) => !v || v.length <= 100 || 'address-name:v8n_too_long',\n      ({ first_name: v }) => !v || v.length <= 50 || 'first-name:v8n_too_long',\n      ({ last_name: v }) => !v || v.length <= 50 || 'last-name:v8n_too_long',\n      ({ region: v }) => !v || v.length <= 50 || 'region:v8n_too_long',\n      ({ city: v }) => !v || v.length <= 50 || 'city:v8n_too_long',\n      ({ phone: v }) => !v || v.length <= 50 || 'phone:v8n_too_long',\n      ({ company: v }) => !v || v.length <= 50 || 'company:v8n_too_long',\n      ({ address2: v }) => !v || v.length <= 100 || 'address-two:v8n_too_long',\n      ({ address1: v }) => (v && v.length > 0) || 'address-one:v8n_required',\n      ({ address1: v }) => !v || v.length <= 100 || 'address-one:v8n_too_long',\n      ({ postal_code: v }) => !v || v.length <= 50 || 'postal-code:v8n_too_long',\n    ];\n  }\n\n  templates: Templates = {};\n\n  private __countrySetValue = (newValue: string) => {\n    this.edit({ country: newValue, region: '' });\n  };\n\n  get readonlySelector(): BooleanSelector {\n    const alwaysReadonly = [super.readonlySelector.toString()];\n    const isDefault = !!this.data?.is_default_shipping || !!this.data?.is_default_billing;\n    if (isDefault) alwaysReadonly.unshift('address-name');\n    return new BooleanSelector(alwaysReadonly.join(' ').trim());\n  }\n\n  get disabledSelector(): BooleanSelector {\n    const alwaysDisabled = [super.disabledSelector.toString()];\n    const isDefault = !!this.data?.is_default_shipping || !!this.data?.is_default_billing;\n    if (isDefault) alwaysDisabled.unshift('delete');\n    return new BooleanSelector(alwaysDisabled.join(' ').trim());\n  }\n\n  renderBody(): TemplateResult {\n    const regionOptions = this.__regionOptions;\n\n    return html`\n      <div class=\"grid grid-cols-2 gap-m\">\n        <foxy-internal-text-control class=\"col-span-2\" infer=\"address-name\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-control infer=\"first-name\"></foxy-internal-text-control>\n        <foxy-internal-text-control infer=\"last-name\"></foxy-internal-text-control>\n        <foxy-internal-text-control infer=\"company\"></foxy-internal-text-control>\n        <foxy-internal-text-control infer=\"phone\"></foxy-internal-text-control>\n\n        <foxy-internal-text-control class=\"col-span-2\" infer=\"address-one\" property=\"address1\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-text-control class=\"col-span-2\" infer=\"address-two\" property=\"address2\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-select-control\n          infer=\"country\"\n          .options=${this.__countryOptions}\n          .setValue=${this.__countrySetValue}\n        >\n        </foxy-internal-select-control>\n\n        ${regionOptions.length > 0\n          ? html`\n              <foxy-internal-select-control infer=\"region\" .options=${regionOptions}>\n              </foxy-internal-select-control>\n            `\n          : html`<foxy-internal-text-control infer=\"region\"></foxy-internal-text-control>`}\n\n        <foxy-internal-text-control infer=\"city\"></foxy-internal-text-control>\n        <foxy-internal-text-control infer=\"postal-code\"></foxy-internal-text-control>\n      </div>\n      ${super.renderBody()}\n    `;\n  }\n\n  private get __countryOptions() {\n    return Object.keys(countries).map(code => ({\n      label: this.t(`country_${code.toLowerCase()}`),\n      value: code,\n    }));\n  }\n\n  private get __regionOptions() {\n    const country = this.form.country ?? '';\n    const source = countries[country] ?? [];\n\n    return source.map(code => ({\n      label: this.t(`country_${country.toLowerCase()}_region_${code.toLowerCase()}`),\n      value: code,\n    }));\n  }\n}\n"]}