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

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

@@ -1,8 +1,5 @@
-import '@vaadin/vaadin-button';
-import '@vaadin/vaadin-combo-box';
-import '../../internal/InternalConfirmDialog/index';
-import '../../internal/InternalSandbox/index';
-import '../Spinner/index';
-import '../I18n/index';
+import '../../internal/InternalSelectControl/index';
+import '../../internal/InternalTextControl/index';
+import '../../internal/InternalForm/index';
 import { AddressForm } from './AddressForm';
 export { AddressForm };

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

@@ -1,9 +1,6 @@
-import '@vaadin/vaadin-button';
-import '@vaadin/vaadin-combo-box';
-import "../../internal/InternalConfirmDialog/index.js";
-import "../../internal/InternalSandbox/index.js";
-import "../Spinner/index.js";
-import "../I18n/index.js";
+import "../../internal/InternalSelectControl/index.js";
+import "../../internal/InternalTextControl/index.js";
+import "../../internal/InternalForm/index.js";
 import { AddressForm } from "./AddressForm.js";
 customElements.define('foxy-address-form', AddressForm);
 export { AddressForm };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/AddressForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,0BAA0B,CAAC;AAClC,uDAAoD;AACpD,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,WAAW,EAAE,yBAAsB;AAE5C,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\nimport '@vaadin/vaadin-combo-box';\nimport '../../internal/InternalConfirmDialog/index';\nimport '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { AddressForm } from './AddressForm';\n\ncustomElements.define('foxy-address-form', AddressForm);\n\nexport { AddressForm };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/AddressForm/index.ts"],"names":[],"mappings":"AAAA,uDAAoD;AACpD,qDAAkD;AAClD,8CAA2C;AAE3C,OAAO,EAAE,WAAW,EAAE,yBAAsB;AAE5C,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSelectControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalForm/index';\n\nimport { AddressForm } from './AddressForm';\n\ncustomElements.define('foxy-address-form', AddressForm);\n\nexport { AddressForm };\n"]}

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

@@ -1,7 +1,7 @@
-import { AddressForm } from './AddressForm';
-import { Rels } from '@foxy.io/sdk/customer';
-import { Renderer } from '../../../mixins/configurable';
-import { Resource } from '@foxy.io/sdk/core';
+import type { AddressForm } from './AddressForm';
+import type { Renderer } from '../../../mixins/configurable';
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/customer';
 export declare type Data = Resource<Rels.CustomerAddress>;
 export declare type Templates = {
     'address-name:before'?: Renderer<AddressForm>;
@@ -31,14 +31,3 @@ export declare type Templates = {
     'create:before'?: Renderer<AddressForm>;
     'create:after'?: Renderer<AddressForm>;
 };
-export declare type ComboBoxParams = {
-    source: string[];
-    field: keyof Data;
-    custom?: boolean;
-};
-export declare type TextFieldParams = {
-    field: keyof Data;
-    wide?: boolean;
-    required?: boolean;
-    readonly?: boolean;
-};

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/AddressForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { AddressForm } from './AddressForm';\nimport { Rels } from '@foxy.io/sdk/customer';\nimport { Renderer } from '../../../mixins/configurable';\nimport { Resource } from '@foxy.io/sdk/core';\n\nexport type Data = Resource<Rels.CustomerAddress>;\nexport type Templates = {\n  'address-name:before'?: Renderer<AddressForm>;\n  'address-name:after'?: Renderer<AddressForm>;\n  'first-name:before'?: Renderer<AddressForm>;\n  'first-name:after'?: Renderer<AddressForm>;\n  'last-name:before'?: Renderer<AddressForm>;\n  'last-name:after'?: Renderer<AddressForm>;\n  'region:before'?: Renderer<AddressForm>;\n  'region:after'?: Renderer<AddressForm>;\n  'city:before'?: Renderer<AddressForm>;\n  'city:after'?: Renderer<AddressForm>;\n  'phone:before'?: Renderer<AddressForm>;\n  'phone:after'?: Renderer<AddressForm>;\n  'company:before'?: Renderer<AddressForm>;\n  'company:after'?: Renderer<AddressForm>;\n  'address-one:before'?: Renderer<AddressForm>;\n  'address-one:after'?: Renderer<AddressForm>;\n  'address-two:before'?: Renderer<AddressForm>;\n  'address-two:after'?: Renderer<AddressForm>;\n  'postal-code:before'?: Renderer<AddressForm>;\n  'postal-code:after'?: Renderer<AddressForm>;\n  'timestamps:before'?: Renderer<AddressForm>;\n  'timestamps:after'?: Renderer<AddressForm>;\n  'delete:before'?: Renderer<AddressForm>;\n  'delete:after'?: Renderer<AddressForm>;\n  'create:before'?: Renderer<AddressForm>;\n  'create:after'?: Renderer<AddressForm>;\n};\n\nexport type ComboBoxParams = {\n  source: string[];\n  field: keyof Data;\n  custom?: boolean;\n};\n\nexport type TextFieldParams = {\n  field: keyof Data;\n  wide?: boolean;\n  required?: boolean;\n  readonly?: boolean;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/AddressForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AddressForm } from './AddressForm';\nimport type { Renderer } from '../../../mixins/configurable';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/customer';\n\nexport type Data = Resource<Rels.CustomerAddress>;\n\nexport type Templates = {\n  'address-name:before'?: Renderer<AddressForm>;\n  'address-name:after'?: Renderer<AddressForm>;\n  'first-name:before'?: Renderer<AddressForm>;\n  'first-name:after'?: Renderer<AddressForm>;\n  'last-name:before'?: Renderer<AddressForm>;\n  'last-name:after'?: Renderer<AddressForm>;\n  'region:before'?: Renderer<AddressForm>;\n  'region:after'?: Renderer<AddressForm>;\n  'city:before'?: Renderer<AddressForm>;\n  'city:after'?: Renderer<AddressForm>;\n  'phone:before'?: Renderer<AddressForm>;\n  'phone:after'?: Renderer<AddressForm>;\n  'company:before'?: Renderer<AddressForm>;\n  'company:after'?: Renderer<AddressForm>;\n  'address-one:before'?: Renderer<AddressForm>;\n  'address-one:after'?: Renderer<AddressForm>;\n  'address-two:before'?: Renderer<AddressForm>;\n  'address-two:after'?: Renderer<AddressForm>;\n  'postal-code:before'?: Renderer<AddressForm>;\n  'postal-code:after'?: Renderer<AddressForm>;\n  'timestamps:before'?: Renderer<AddressForm>;\n  'timestamps:after'?: Renderer<AddressForm>;\n  'delete:before'?: Renderer<AddressForm>;\n  'delete:after'?: Renderer<AddressForm>;\n  'create:before'?: Renderer<AddressForm>;\n  'create:after'?: Renderer<AddressForm>;\n};\n"]}

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

@@ -1,11 +1,9 @@
-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("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost> & {
-    styles: import("lit-element").CSSResultArray;
-} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & 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';
+declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
 };
 /**
@@ -13,14 +11,19 @@ declare const Base: typeof NucleonElement & import("@open-wc/dedupe-mixin").Cons
  *
  * @slot name:before - **new in v1.4.0**
  * @slot name:after - **new in v1.4.0**
+ *
  * @slot value:before - **new in v1.4.0**
  * @slot value:after - **new in v1.4.0**
+ *
  * @slot visibility:before - **new in v1.4.0**
  * @slot visibility:after - **new in v1.4.0**
+ *
  * @slot timestamps:before - **new in v1.4.0**
  * @slot timestamps:after - **new in v1.4.0**
+ *
  * @slot create:before - **new in v1.4.0**
  * @slot create:after - **new in v1.4.0**
+ *
  * @slot delete:before - **new in v1.4.0**
  * @slot delete:after - **new in v1.4.0**
  *
@@ -28,24 +31,11 @@ declare const Base: typeof NucleonElement & import("@open-wc/dedupe-mixin").Cons
  * @since 1.2.0
  */
 export declare class AttributeForm extends Base<Data> {
-    static get scopedElements(): ScopedElementsMap;
     static get v8n(): NucleonV8N<Data>;
     templates: Templates;
-    private static readonly __visibilityOptions;
-    private readonly __getValidator;
-    private readonly __bindField;
-    private readonly __maybeRenderTextField;
-    private readonly __renderVisibility;
-    private readonly __renderTimestamps;
-    private readonly __renderDelete;
-    private readonly __renderCreate;
-    render(): TemplateResult;
-    disconnectedCallback(): void;
-    private get __confirmDialog();
-    private __getErrorMessage;
-    private __handleKeyDown;
-    private __handleChoiceChange;
-    private __handleDeleteClick;
-    private __handleConfirmHide;
+    private readonly __visibilityGetValue;
+    private readonly __visibilityOptions;
+    get readonlySelector(): BooleanSelector;
+    renderBody(): TemplateResult;
 }
 export {};

package/dist/elements/public/AttributeForm/AttributeForm.js

@@ -1,28 +1,27 @@
-import { Choice, Group, Metadata } from "../../private/index.js";
-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 { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { classMap } from "../../../utils/class-map.js";
-import { ifDefined } from 'lit-html/directives/if-defined';
-import memoize from 'lodash-es/memoize';
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { InternalForm } from "../../internal/InternalForm.js";
+import { html } from 'lit-html';
 const NS = 'attribute-form';
-const Base = TranslatableMixin(ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(NucleonElement))), NS);
+const Base = TranslatableMixin(InternalForm, NS);
 /**
  * Form element for creating or editing attributes.
  *
  * @slot name:before - **new in v1.4.0**
  * @slot name:after - **new in v1.4.0**
+ *
  * @slot value:before - **new in v1.4.0**
  * @slot value:after - **new in v1.4.0**
+ *
  * @slot visibility:before - **new in v1.4.0**
  * @slot visibility:after - **new in v1.4.0**
+ *
  * @slot timestamps:before - **new in v1.4.0**
  * @slot timestamps:after - **new in v1.4.0**
+ *
  * @slot create:before - **new in v1.4.0**
  * @slot create:after - **new in v1.4.0**
+ *
  * @slot delete:before - **new in v1.4.0**
  * @slot delete:after - **new in v1.4.0**
  *
@@ -33,244 +32,42 @@ export class AttributeForm 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.target;
-                this.edit({ [key]: target.value });
-            };
-        });
-        this.__maybeRenderTextField = ({ field }) => {
-            var _a, _b;
-            const bsid = field.replace(/_/, '-');
-            if (this.hiddenSelector.matches(bsid))
-                return '';
-            return html `
-      <div>
-        ${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=${field}
-          .checkValidity=${this.__getValidator(field)}
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid)}
-          ?readonly=${this.readonlySelector.matches(bsid)}
-          @input=${this.__bindField(field)}
-          @keydown=${this.__handleKeyDown}
-        >
-        </vaadin-text-field>
-
-        ${this.renderTemplateOrSlot(`${bsid}:after`)}
-      </div>
-    `;
-        };
-        this.__renderVisibility = () => {
-            var _a;
-            const { disabledSelector, readonlySelector, form, lang, ns } = this;
-            const isBusyOrFailed = !this.in('idle');
-            const isDisabled = isBusyOrFailed || disabledSelector.matches('visibility', true);
-            return html `
-      <div>
-        ${this.renderTemplateOrSlot('visibility:before')}
-
-        <x-group frame>
-          <foxy-i18n
-            data-testid="visibility-label"
-            class=${classMap({ 'text-disabled': isDisabled })}
-            lang=${lang}
-            slot="header"
-            key="visibility"
-            ns=${ns}
-          >
-          </foxy-i18n>
-
-          <x-choice
-            data-testid="visibility"
-            lang=${lang}
-            ns=${AttributeForm.defaultNS}
-            .items=${AttributeForm.__visibilityOptions}
-            .value=${((_a = form === null || form === void 0 ? void 0 : form.visibility) !== null && _a !== void 0 ? _a : 'private')}
-            ?disabled=${isBusyOrFailed || disabledSelector.matches('visibility', true)}
-            ?readonly=${readonlySelector.matches('visibility', true)}
-            @change=${this.__handleChoiceChange}
-          >
-            <foxy-i18n slot="private-label" lang=${lang} key="visibility_private" ns=${ns}>
-            </foxy-i18n>
-
-            <foxy-i18n slot="restricted-label" lang=${lang} key="visibility_restricted" ns=${ns}>
-            </foxy-i18n>
-
-            <foxy-i18n ns=${ns} lang=${lang} slot="public-label" key="visibility_public">
-            </foxy-i18n>
-          </x-choice>
-        </x-group>
-
-        ${this.renderTemplateOrSlot('visibility: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.__renderDelete = () => {
-            return html `
-      <div>
-        ${this.renderTemplateOrSlot('delete:before')}
-
-        <vaadin-button
-          class="w-full"
-          data-testid="delete"
-          theme="error"
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}
-          @click=${this.__handleDeleteClick}
-        >
-          <foxy-i18n ns=${this.ns} lang=${this.lang} key="delete"></foxy-i18n>
-        </vaadin-button>
-
-        ${this.renderTemplateOrSlot('delete:after')}
-      </div>
-    `;
-        };
-        this.__renderCreate = () => {
-            const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });
-            const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });
-            const isValid = isTemplateValid || isSnapshotValid;
-            return html `
-      <div>
-        ${this.renderTemplateOrSlot('create:before')}
-
-        <vaadin-button
-          data-testid="create"
-          class="w-full"
-          theme="success primary"
-          ?disabled=${!this.in('idle') || !isValid || this.disabledSelector.matches('create', true)}
-          @click=${() => this.submit()}
-        >
-          <foxy-i18n ns=${this.ns} lang=${this.lang} key="create"></foxy-i18n>
-        </vaadin-button>
-
-        ${this.renderTemplateOrSlot('create: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-text-area': customElements.get('vaadin-text-area'),
-            'x-metadata': Metadata,
-            'vaadin-button': customElements.get('vaadin-button'),
-            'x-choice': Choice,
-            'x-group': Group,
-            'foxy-i18n': customElements.get('foxy-i18n'),
-            'foxy-spinner': customElements.get('foxy-spinner'),
+        this.__visibilityGetValue = () => {
+            return this.form.visibility || 'private';
         };
+        this.__visibilityOptions = [
+            { label: 'option_public', value: 'public' },
+            { label: 'option_restricted', value: 'restricted' },
+            { label: 'option_private', value: 'private' },
+        ];
     }
     static get v8n() {
         return [
-            ({ value }) => (value && value.length > 0) || 'value_required',
-            ({ value }) => (value && value.length <= 1000) || 'value_too_long',
-            ({ name }) => (name && name.length > 0) || 'name_required',
-            ({ name }) => (name && name.length <= 500) || 'name_too_long',
+            ({ value }) => (value && value.length > 0) || 'value:v8n_required',
+            ({ value }) => !value || value.length <= 1000 || 'value:v8n_too_long',
+            ({ name }) => (name && name.length > 0) || 'name:v8n_required',
+            ({ name }) => !name || name.length <= 500 || 'name:v8n_too_long',
         ];
     }
-    render() {
-        var _a, _b;
-        const { hiddenSelector, data, lang, ns } = this;
-        const isBusy = this.in('busy');
-        const isFail = this.in('fail');
+    get readonlySelector() {
+        const alwaysMatch = [super.readonlySelector.toString()];
+        if (this.href)
+            alwaysMatch.unshift('visibility');
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
+    }
+    renderBody() {
         return html `
-      <foxy-internal-confirm-dialog
-        data-testid="confirm"
-        message="delete_prompt"
-        confirm="delete"
-        cancel="cancel"
-        header="delete"
-        theme="primary error"
-        lang=${lang}
-        ns=${ns}
-        id="confirm"
-        @hide=${this.__handleConfirmHide}
+      <foxy-internal-source-control infer="name"></foxy-internal-source-control>
+      <foxy-internal-source-control infer="value"></foxy-internal-source-control>
+      <foxy-internal-radio-group-control
+        infer="visibility"
+        .options=${this.__visibilityOptions}
+        .getValue=${this.__visibilityGetValue}
       >
-      </foxy-internal-confirm-dialog>
-
-      <div class="relative" aria-busy=${this.in('busy')} aria-live="polite">
-        <div class="grid grid-cols-1 gap-l">
-          ${this.__maybeRenderTextField({ field: 'name' })}
-          ${this.__maybeRenderTextField({ field: 'value' })}
-          ${hiddenSelector.matches('visibility', true) ? '' : this.__renderVisibility()}
-          ${hiddenSelector.matches('timestamps', true) || !data ? '' : this.__renderTimestamps()}
-          ${hiddenSelector.matches('delete', true) || !data ? '' : this.__renderDelete()}
-          ${hiddenSelector.matches('create', true) || data ? '' : this.__renderCreate()}
-        </div>
+      </foxy-internal-radio-group-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-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="${ns} ${(_b = (_a = customElements.get('foxy-spinner')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
-          >
-          </foxy-spinner>
-        </div>
-      </div>
+      ${super.renderBody()}
     `;
     }
-    disconnectedCallback() {
-        var _a, _b, _c, _d;
-        super.disconnectedCallback();
-        (_b = (_a = this.__bindField.cache).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
-        (_d = (_c = this.__getValidator.cache).clear) === null || _d === void 0 ? void 0 : _d.call(_c);
-    }
-    get __confirmDialog() {
-        return this.renderRoot.querySelector('#confirm');
-    }
-    __getErrorMessage(prefix) {
-        const error = this.errors.find(err => err.startsWith(prefix));
-        return error ? this.t(error.replace(prefix, 'v8n')).toString() : '';
-    }
-    __handleKeyDown(evt) {
-        if (evt.key === 'Enter')
-            this.submit();
-    }
-    __handleChoiceChange(evt) {
-        this.edit({ visibility: evt.detail });
-    }
-    __handleDeleteClick(evt) {
-        this.__confirmDialog.show(evt.currentTarget);
-    }
-    __handleConfirmHide(evt) {
-        if (!evt.detail.cancelled)
-            this.delete();
-    }
 }
-AttributeForm.__visibilityOptions = ['private', 'restricted', 'public'];
 //# sourceMappingURL=AttributeForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AttributeForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeForm/AttributeForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Choice, Group, Metadata } from '../../private/index';\nimport { Data, Templates, TextFieldParams } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ChoiceChangeEvent } from '../../private/events';\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 { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport memoize from 'lodash-es/memoize';\n\nconst NS = 'attribute-form';\nconst Base = TranslatableMixin(\n  ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(NucleonElement))),\n  NS\n);\n\n/**\n * Form element for creating or editing attributes.\n *\n * @slot name:before - **new in v1.4.0**\n * @slot name:after - **new in v1.4.0**\n * @slot value:before - **new in v1.4.0**\n * @slot value:after - **new in v1.4.0**\n * @slot visibility:before - **new in v1.4.0**\n * @slot visibility:after - **new in v1.4.0**\n * @slot timestamps:before - **new in v1.4.0**\n * @slot timestamps:after - **new in v1.4.0**\n * @slot create:before - **new in v1.4.0**\n * @slot create:after - **new in v1.4.0**\n * @slot delete:before - **new in v1.4.0**\n * @slot delete:after - **new in v1.4.0**\n *\n * @element foxy-attribute-form\n * @since 1.2.0\n */\nexport class AttributeForm 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-text-area': customElements.get('vaadin-text-area'),\n      'x-metadata': Metadata,\n      'vaadin-button': customElements.get('vaadin-button'),\n      'x-choice': Choice,\n      'x-group': Group,\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ value }) => (value && value.length > 0) || 'value_required',\n      ({ value }) => (value && value.length <= 1000) || 'value_too_long',\n      ({ name }) => (name && name.length > 0) || 'name_required',\n      ({ name }) => (name && name.length <= 500) || 'name_too_long',\n    ];\n  }\n\n  templates: Templates = {};\n\n  private static readonly __visibilityOptions = ['private', 'restricted', 'public'] as const;\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.target as HTMLInputElement;\n      this.edit({ [key]: target.value });\n    };\n  });\n\n  private readonly __maybeRenderTextField = ({ field }: TextFieldParams) => {\n    const bsid = field.replace(/_/, '-');\n    if (this.hiddenSelector.matches(bsid)) return '';\n\n    return html`\n      <div>\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=${field}\n          .checkValidity=${this.__getValidator(field)}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid)}\n          ?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 __renderVisibility = () => {\n    const { disabledSelector, readonlySelector, form, lang, ns } = this;\n    const isBusyOrFailed = !this.in('idle');\n    const isDisabled = isBusyOrFailed || disabledSelector.matches('visibility', true);\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('visibility:before')}\n\n        <x-group frame>\n          <foxy-i18n\n            data-testid=\"visibility-label\"\n            class=${classMap({ 'text-disabled': isDisabled })}\n            lang=${lang}\n            slot=\"header\"\n            key=\"visibility\"\n            ns=${ns}\n          >\n          </foxy-i18n>\n\n          <x-choice\n            data-testid=\"visibility\"\n            lang=${lang}\n            ns=${AttributeForm.defaultNS}\n            .items=${AttributeForm.__visibilityOptions}\n            .value=${(form?.visibility ?? 'private') as any}\n            ?disabled=${isBusyOrFailed || disabledSelector.matches('visibility', true)}\n            ?readonly=${readonlySelector.matches('visibility', true)}\n            @change=${this.__handleChoiceChange}\n          >\n            <foxy-i18n slot=\"private-label\" lang=${lang} key=\"visibility_private\" ns=${ns}>\n            </foxy-i18n>\n\n            <foxy-i18n slot=\"restricted-label\" lang=${lang} key=\"visibility_restricted\" ns=${ns}>\n            </foxy-i18n>\n\n            <foxy-i18n ns=${ns} lang=${lang} slot=\"public-label\" key=\"visibility_public\">\n            </foxy-i18n>\n          </x-choice>\n        </x-group>\n\n        ${this.renderTemplateOrSlot('visibility: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 __renderDelete = () => {\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('delete:before')}\n\n        <vaadin-button\n          class=\"w-full\"\n          data-testid=\"delete\"\n          theme=\"error\"\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}\n          @click=${this.__handleDeleteClick}\n        >\n          <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"delete\"></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('delete:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderCreate = () => {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('create:before')}\n\n        <vaadin-button\n          data-testid=\"create\"\n          class=\"w-full\"\n          theme=\"success primary\"\n          ?disabled=${!this.in('idle') || !isValid || this.disabledSelector.matches('create', true)}\n          @click=${() => this.submit()}\n        >\n          <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"create\"></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('create:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const { hiddenSelector, data, lang, ns } = this;\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n\n    return html`\n      <foxy-internal-confirm-dialog\n        data-testid=\"confirm\"\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        @hide=${this.__handleConfirmHide}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div class=\"relative\" aria-busy=${this.in('busy')} aria-live=\"polite\">\n        <div class=\"grid grid-cols-1 gap-l\">\n          ${this.__maybeRenderTextField({ field: 'name' })}\n          ${this.__maybeRenderTextField({ field: 'value' })}\n          ${hiddenSelector.matches('visibility', true) ? '' : this.__renderVisibility()}\n          ${hiddenSelector.matches('timestamps', true) || !data ? '' : this.__renderTimestamps()}\n          ${hiddenSelector.matches('delete', true) || !data ? '' : this.__renderDelete()}\n          ${hiddenSelector.matches('create', true) || data ? '' : this.__renderCreate()}\n        </div>\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=\"${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.__bindField.cache.clear?.();\n    this.__getValidator.cache.clear?.();\n  }\n\n  private get __confirmDialog(): InternalConfirmDialog {\n    return this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\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 __handleKeyDown(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') this.submit();\n  }\n\n  private __handleChoiceChange(evt: ChoiceChangeEvent) {\n    this.edit({ visibility: evt.detail as Data['visibility'] });\n  }\n\n  private __handleDeleteClick(evt: Event) {\n    this.__confirmDialog.show(evt.currentTarget as HTMLElement);\n  }\n\n  private __handleConfirmHide(evt: DialogHideEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n}\n"]}
+{"version":3,"file":"AttributeForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeForm/AttributeForm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,uCAAoC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,gBAAgB,CAAC;AAC5B,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,OAAO,aAAc,SAAQ,IAAU;IAA7C;;QAUE,cAAS,GAAc,EAAE,CAAC;QAET,yBAAoB,GAAG,GAAG,EAAE;YAC3C,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC;QAC3C,CAAC,CAAC;QAEe,wBAAmB,GAAG;YACrC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE;YAC3C,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,YAAY,EAAE;YACnD,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,EAAE;SAC9C,CAAC;IAsBJ,CAAC;IAzCC,MAAM,KAAK,GAAG;QACZ,OAAO;YACL,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,oBAAoB;YAClE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,IAAI,oBAAoB;YACrE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,mBAAmB;YAC9D,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,GAAG,IAAI,mBAAmB;SACjE,CAAC;IACJ,CAAC;IAcD,IAAI,gBAAgB;QAClB,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxD,IAAI,IAAI,CAAC,IAAI;YAAE,WAAW,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QACjD,OAAO,IAAI,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IAC3D,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAA;;;;;mBAKI,IAAI,CAAC,mBAAmB;oBACvB,IAAI,CAAC,oBAAoB;;;;QAIrC,KAAK,CAAC,UAAU,EAAE;KACrB,CAAC;IACJ,CAAC;CACF","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';\nimport { html } from 'lit-html';\n\nconst NS = 'attribute-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Form element for creating or editing attributes.\n *\n * @slot name:before - **new in v1.4.0**\n * @slot name:after - **new in v1.4.0**\n *\n * @slot value:before - **new in v1.4.0**\n * @slot value:after - **new in v1.4.0**\n *\n * @slot visibility:before - **new in v1.4.0**\n * @slot visibility: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-attribute-form\n * @since 1.2.0\n */\nexport class AttributeForm extends Base<Data> {\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ value }) => (value && value.length > 0) || 'value:v8n_required',\n      ({ value }) => !value || value.length <= 1000 || 'value:v8n_too_long',\n      ({ name }) => (name && name.length > 0) || 'name:v8n_required',\n      ({ name }) => !name || name.length <= 500 || 'name:v8n_too_long',\n    ];\n  }\n\n  templates: Templates = {};\n\n  private readonly __visibilityGetValue = () => {\n    return this.form.visibility || 'private';\n  };\n\n  private readonly __visibilityOptions = [\n    { label: 'option_public', value: 'public' },\n    { label: 'option_restricted', value: 'restricted' },\n    { label: 'option_private', value: 'private' },\n  ];\n\n  get readonlySelector(): BooleanSelector {\n    const alwaysMatch = [super.readonlySelector.toString()];\n    if (this.href) alwaysMatch.unshift('visibility');\n    return new BooleanSelector(alwaysMatch.join(' ').trim());\n  }\n\n  renderBody(): TemplateResult {\n    return html`\n      <foxy-internal-source-control infer=\"name\"></foxy-internal-source-control>\n      <foxy-internal-source-control infer=\"value\"></foxy-internal-source-control>\n      <foxy-internal-radio-group-control\n        infer=\"visibility\"\n        .options=${this.__visibilityOptions}\n        .getValue=${this.__visibilityGetValue}\n      >\n      </foxy-internal-radio-group-control>\n\n      ${super.renderBody()}\n    `;\n  }\n}\n"]}

package/dist/elements/public/AttributeForm/index.d.ts

@@ -1,9 +1,5 @@
-import '@vaadin/vaadin-text-field/vaadin-text-area';
-import '@vaadin/vaadin-text-field';
-import '@vaadin/vaadin-button';
-import '../../internal/InternalConfirmDialog/index';
-import '../../internal/InternalSandbox/index';
-import '../Spinner/index';
-import '../I18n/index';
+import '../../internal/InternalRadioGroupControl/index';
+import '../../internal/InternalSourceControl/index';
+import '../../internal/InternalForm/index';
 import { AttributeForm } from './AttributeForm';
 export { AttributeForm };

package/dist/elements/public/AttributeForm/index.js

@@ -1,10 +1,6 @@
-import '@vaadin/vaadin-text-field/vaadin-text-area';
-import '@vaadin/vaadin-text-field';
-import '@vaadin/vaadin-button';
-import "../../internal/InternalConfirmDialog/index.js";
-import "../../internal/InternalSandbox/index.js";
-import "../Spinner/index.js";
-import "../I18n/index.js";
+import "../../internal/InternalRadioGroupControl/index.js";
+import "../../internal/InternalSourceControl/index.js";
+import "../../internal/InternalForm/index.js";
 import { AttributeForm } from "./AttributeForm.js";
 customElements.define('foxy-attribute-form', AttributeForm);
 export { AttributeForm };

package/dist/elements/public/AttributeForm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,4CAA4C,CAAC;AACpD,OAAO,2BAA2B,CAAC;AACnC,OAAO,uBAAuB,CAAC;AAC/B,uDAAoD;AACpD,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,aAAa,EAAE,2BAAwB;AAEhD,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,aAAa,CAAC,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-text-field/vaadin-text-area';\nimport '@vaadin/vaadin-text-field';\nimport '@vaadin/vaadin-button';\nimport '../../internal/InternalConfirmDialog/index';\nimport '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { AttributeForm } from './AttributeForm';\n\ncustomElements.define('foxy-attribute-form', AttributeForm);\n\nexport { AttributeForm };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeForm/index.ts"],"names":[],"mappings":"AAAA,2DAAwD;AACxD,uDAAoD;AACpD,8CAA2C;AAE3C,OAAO,EAAE,aAAa,EAAE,2BAAwB;AAEhD,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,aAAa,CAAC,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,CAAC","sourcesContent":["import '../../internal/InternalRadioGroupControl/index';\nimport '../../internal/InternalSourceControl/index';\nimport '../../internal/InternalForm/index';\n\nimport { AttributeForm } from './AttributeForm';\n\ncustomElements.define('foxy-attribute-form', AttributeForm);\n\nexport { AttributeForm };\n"]}

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

@@ -1,11 +1,8 @@
-import { AttributeForm } from './AttributeForm';
-import { Rels } from '@foxy.io/sdk/backend';
-import { Renderer } from '../../../mixins/configurable';
-import { Resource } from '@foxy.io/sdk/core';
+import type { AttributeForm } from './AttributeForm';
+import type { Renderer } from '../../../mixins/configurable';
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
 export declare type Data = Resource<Rels.Attribute>;
-export declare type TextFieldParams = {
-    field: keyof Data;
-};
 export declare type Templates = {
     'name:before'?: Renderer<AttributeForm>;
     'name:after'?: Renderer<AttributeForm>;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { AttributeForm } from './AttributeForm';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Renderer } from '../../../mixins/configurable';\nimport { Resource } from '@foxy.io/sdk/core';\n\nexport type Data = Resource<Rels.Attribute>;\nexport type TextFieldParams = { field: keyof Data };\nexport type Templates = {\n  'name:before'?: Renderer<AttributeForm>;\n  'name:after'?: Renderer<AttributeForm>;\n  'value:before'?: Renderer<AttributeForm>;\n  'value:after'?: Renderer<AttributeForm>;\n  'visibility:before'?: Renderer<AttributeForm>;\n  'visibility:after'?: Renderer<AttributeForm>;\n  'timestamps:before'?: Renderer<AttributeForm>;\n  'timestamps:after'?: Renderer<AttributeForm>;\n  'delete:before'?: Renderer<AttributeForm>;\n  'delete:after'?: Renderer<AttributeForm>;\n  'create:before'?: Renderer<AttributeForm>;\n  'create:after'?: Renderer<AttributeForm>;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/AttributeForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AttributeForm } from './AttributeForm';\nimport type { Renderer } from '../../../mixins/configurable';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nexport type Data = Resource<Rels.Attribute>;\nexport type Templates = {\n  'name:before'?: Renderer<AttributeForm>;\n  'name:after'?: Renderer<AttributeForm>;\n  'value:before'?: Renderer<AttributeForm>;\n  'value:after'?: Renderer<AttributeForm>;\n  'visibility:before'?: Renderer<AttributeForm>;\n  'visibility:after'?: Renderer<AttributeForm>;\n  'timestamps:before'?: Renderer<AttributeForm>;\n  'timestamps:after'?: Renderer<AttributeForm>;\n  'delete:before'?: Renderer<AttributeForm>;\n  'delete:after'?: Renderer<AttributeForm>;\n  'create:before'?: Renderer<AttributeForm>;\n  'create:after'?: Renderer<AttributeForm>;\n};\n"]}

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

@@ -63,7 +63,6 @@ export declare class CustomerForm extends Base<Data> {
     private readonly __isAnonymousSetValue;
     private readonly __isAnonymousOptions;
     private __refreshInterval;
-    get readonlySelector(): BooleanSelector;
     get hiddenSelector(): BooleanSelector;
     disconnectedCallback(): void;
     connectedCallback(): void;

package/dist/elements/public/CustomerForm/CustomerForm.js

@@ -126,11 +126,6 @@ export class CustomerForm extends Base {
             ({ email: v }) => !v || isEmail(v) || 'email:v8n_invalid_email',
         ];
     }
-    get readonlySelector() {
-        const readonly = this.data ? ['is-anonymous'] : [];
-        readonly.push(super.readonlySelector.toString());
-        return new BooleanSelector(readonly.join(' ').trim());
-    }
     get hiddenSelector() {
         const hidden = new Set(super.hiddenSelector.toString().split(' '));
         if (this.settings) {
@@ -149,8 +144,10 @@ export class CustomerForm extends Base {
             hidden.add('password-old');
             hidden.add('legal-notice');
         }
-        if (this.href)
+        if (this.href) {
+            hidden.add('is-anonymous');
             hidden.add('legal-notice');
+        }
         return new BooleanSelector(Array.from(hidden).join(' ').trim());
     }
     disconnectedCallback() {
@@ -181,8 +178,6 @@ export class CustomerForm extends Base {
         <foxy-internal-text-control infer="last-name"></foxy-internal-text-control>
       </div>
 
-      <foxy-internal-text-control infer="tax-id"></foxy-internal-text-control>
-
       <foxy-internal-text-control helper-text=${this.__emailHelperText} infer="email">
       </foxy-internal-text-control>
 
@@ -211,6 +206,8 @@ export class CustomerForm extends Base {
       >
       </foxy-internal-password-control>
 
+      <foxy-internal-text-control infer="tax-id"></foxy-internal-text-control>
+
       <foxy-internal-customer-form-legal-notice-control infer="legal-notice">
       </foxy-internal-customer-form-legal-notice-control>