@foxy.io/elements 1.27.2-beta.1 → 1.28.0-beta.1

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

@@ -32,39 +32,96 @@ export class InternalForm extends Base {
     renderHeaderActions(data) {
         return null;
     }
+    /** Getter that returns a i18n key for the optional form header title. */
+    get headerTitleKey() {
+        return 'title';
+    }
+    /** I18next options to pass to the header title translation function. */
+    get headerTitleOptions() {
+        return {
+            ...this.data,
+            context: this.data ? 'existing' : 'new',
+            id: this.data ? getResourceId(this.data._links.self.href) : null,
+        };
+    }
+    /** Getter that returns a i18n key for the optional form header subtitle. Note that subtitle is shown only when data is avaiable. */
+    get headerSubtitleKey() {
+        return 'subtitle';
+    }
+    /** I18next options to pass to the header subtitle translation function. Note that subtitle is shown only when data is avaiable. */
+    get headerSubtitleOptions() {
+        var _a;
+        return (_a = this.data) !== null && _a !== void 0 ? _a : {};
+    }
+    /** ID that will be written to clipboard when Copy ID button in header is clicked. */
+    get headerCopyIdValue() {
+        var _a;
+        return this.data ? (_a = getResourceId(this.data._links.self.href)) !== null && _a !== void 0 ? _a : '' : '';
+    }
     /**
-     * Renders optional form header with ID, last update timestamp and actions list (snapshot-only).
-     * Customize which actions are rendered with `.renderHeaderActions()` method.
+     * Renders optional form header.
+     * - Customize which actions are rendered with `.renderHeaderActions()` method.
+     * - Customize the header title and subtitle with `.headerTitleKey` and `.headerSubtitleKey` getters.
+     * - Customize the header title and subtitle options with `.headerTitleOptions` and `.headerSubtitleOptions` getters.
+     * - To hide the header completely, add `header` to `hidden-controls` attribute.
      */
     renderHeader() {
+        if (this.hiddenSelector.matches('header', true))
+            return html ``;
         const data = this.data;
         const actions = data ? this.renderHeaderActions(data) : null;
-        const id = data ? getResourceId(data._links.self.href) : '';
         return html `
-      <h2>
-        <span class="flex items-center gap-s leading-xs text-xxl font-medium break-all">
-          <foxy-i18n infer="header" key=${data ? 'title_existing' : 'title_new'} .options=${{ id }}>
-          </foxy-i18n>
-          ${data
+      <div>
+        ${this.renderTemplateOrSlot('header:before')}
+        <h2>
+          <span class="flex items-center gap-s leading-xs text-xl font-medium break-all">
+            <foxy-i18n
+              options=${JSON.stringify(this.headerTitleOptions)}
+              infer="header"
+              key=${this.headerTitleKey}
+            >
+            </foxy-i18n>
+            ${data
             ? html `
-                <foxy-copy-to-clipboard infer="header" class="text-m" text=${id}>
-                </foxy-copy-to-clipboard>
-              `
+                  ${this.hiddenSelector.matches('header:copy-id', true)
+                ? ''
+                : html `
+                        <foxy-copy-to-clipboard
+                          infer="header copy-id"
+                          class="text-m"
+                          text=${this.headerCopyIdValue}
+                        >
+                        </foxy-copy-to-clipboard>
+                      `}
+                  ${this.hiddenSelector.matches('header:copy-json', true)
+                ? ''
+                : html `
+                        <foxy-copy-to-clipboard
+                          infer="header copy-json"
+                          class="text-m"
+                          icon="icons:code"
+                          text=${JSON.stringify(data, null, 2)}
+                        >
+                        </foxy-copy-to-clipboard>
+                      `}
+                `
             : ''}
-        </span>
-        ${data
+          </span>
+          ${data
             ? html `
-              <foxy-i18n
-                infer="header"
-                class="text-l text-secondary"
-                key="subtitle"
-                .options=${data}
-              >
-              </foxy-i18n>
-              ${actions ? html `<div class="mt-xs flex gap-m">${actions}</div>` : ''}
-            `
+                <foxy-i18n
+                  infer="header"
+                  class="text-m text-secondary"
+                  key=${this.headerSubtitleKey}
+                  .options=${this.headerSubtitleOptions}
+                >
+                </foxy-i18n>
+                ${actions ? html `<div class="mt-xs flex gap-m">${actions}</div>` : ''}
+              `
             : ''}
-      </h2>
+        </h2>
+        ${this.renderTemplateOrSlot('header:after')}
+      </div>
     `;
     }
     /**
@@ -73,12 +130,34 @@ export class InternalForm extends Base {
      * don't forget to add `super.renderBody()` to your template.
      */
     renderBody() {
-        return this.data
-            ? html `
-          <foxy-internal-timestamps-control infer="timestamps"></foxy-internal-timestamps-control>
-          <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control>
-        `
-            : html `<foxy-internal-create-control infer="create"></foxy-internal-create-control>`;
+        if (this.data) {
+            const isSnapshotDirty = this.in({ idle: { snapshot: 'dirty' } });
+            const isDeleteHidden = this.hiddenSelector.matches('delete', true);
+            const actionClass = classMap({ 'transition-opacity': true, 'opacity-0': !isSnapshotDirty });
+            return html `
+        <foxy-internal-timestamps-control infer="timestamps"></foxy-internal-timestamps-control>
+        ${!isDeleteHidden || isSnapshotDirty
+                ? html `
+              <div class="flex gap-s">
+                <foxy-internal-delete-control infer="delete"></foxy-internal-delete-control>
+                <div class="w-full"></div>
+                <foxy-internal-undo-control class=${actionClass} infer="undo">
+                </foxy-internal-undo-control>
+                <foxy-internal-submit-control class=${actionClass} infer="submit">
+                </foxy-internal-submit-control>
+              </div>
+            `
+                : ''}
+      `;
+        }
+        else {
+            return html `
+        <div class="flex">
+          <foxy-internal-submit-control infer="create" theme="primary success" class="ml-auto">
+          </foxy-internal-submit-control>
+        </div>
+      `;
+        }
     }
     /**
      * Renders the entire form. You should probably implement `.renderBody()`

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

@@ -1 +1 @@
-{"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/**\n * An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n *\n * @element foxy-internal-form\n * @since 1.17.0\n */\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n  /** Validation errors with this prefix will show up at the top of the form. */\n  static generalErrorPrefix = 'error:';\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      status: { type: Object },\n    };\n  }\n\n  /** Status message to render at the top of the form. If `null`, the message is hidden. */\n  status: null | Status = null;\n\n  /**\n   * Renders header actions when the optional header is rendered.\n   * Empty by default.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  renderHeaderActions(data: TData): TemplateResult | null {\n    return null;\n  }\n\n  /**\n   * Renders optional form header with ID, last update timestamp and actions list (snapshot-only).\n   * Customize which actions are rendered with `.renderHeaderActions()` method.\n   */\n  renderHeader(): TemplateResult {\n    const data = this.data;\n    const actions = data ? this.renderHeaderActions(data) : null;\n    const id = data ? getResourceId(data._links.self.href) : '';\n\n    return html`\n      <h2>\n        <span class=\"flex items-center gap-s leading-xs text-xxl font-medium break-all\">\n          <foxy-i18n infer=\"header\" key=${data ? 'title_existing' : 'title_new'} .options=${{ id }}>\n          </foxy-i18n>\n          ${data\n            ? html`\n                <foxy-copy-to-clipboard infer=\"header\" class=\"text-m\" text=${id}>\n                </foxy-copy-to-clipboard>\n              `\n            : ''}\n        </span>\n        ${data\n          ? html`\n              <foxy-i18n\n                infer=\"header\"\n                class=\"text-l text-secondary\"\n                key=\"subtitle\"\n                .options=${data}\n              >\n              </foxy-i18n>\n              ${actions ? html`<div class=\"mt-xs flex gap-m\">${actions}</div>` : ''}\n            `\n          : ''}\n      </h2>\n    `;\n  }\n\n  /**\n   * Renders form body. This is the method you should implement in your forms\n   * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n   * don't forget to add `super.renderBody()` to your template.\n   */\n  renderBody(): TemplateResult {\n    return this.data\n      ? html`\n          <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n          <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n        `\n      : html`<foxy-internal-create-control infer=\"create\"></foxy-internal-create-control>`;\n  }\n\n  /**\n   * Renders the entire form. You should probably implement `.renderBody()`\n   * instead of this method in your form to keep the spinner and the common layout features.\n   */\n  render(): TemplateResult {\n    const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) || !this.data);\n\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'space-y-m': true,\n            'transition-opacity': true,\n            'opacity-0 pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n          ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'flex flex-col items-center justify-center gap-m': true,\n            'transition-opacity absolute inset-0': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('fail') ? 'vertical' : 'no-label'}\n            state=${this.in('fail') ? 'error' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n          ${this.href && this.in('fail')\n            ? html`\n                <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n                  <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n                </vaadin-button>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  private get __generalErrors() {\n    const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n    return this.errors.filter(v => v.startsWith(prefix));\n  }\n\n  private __renderGeneralError(err: string) {\n    return html`\n      <foxy-i18n\n        class=\"leading-xs text-body rounded bg-error-10 block\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n        infer=\"error\"\n        key=${err.replace('error:', '')}\n      >\n      </foxy-i18n>\n    `;\n  }\n\n  private __renderStatus({ key, options }: Status) {\n    if (this.hiddenSelector.matches('status', true)) return;\n    return html`\n      <p\n        data-testid=\"status\"\n        class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n        <vaadin-button\n          class=\"flex-shrink-0\"\n          theme=\"success tertiary-inline\"\n          @click=${() => (this.status = null)}\n        >\n          <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n        </vaadin-button>\n      </p>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/**\n * An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n *\n * @element foxy-internal-form\n * @since 1.17.0\n */\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n  /** Validation errors with this prefix will show up at the top of the form. */\n  static generalErrorPrefix = 'error:';\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      status: { type: Object },\n    };\n  }\n\n  /** Status message to render at the top of the form. If `null`, the message is hidden. */\n  status: null | Status = null;\n\n  /**\n   * Renders header actions when the optional header is rendered.\n   * Empty by default.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  renderHeaderActions(data: TData): TemplateResult | null {\n    return null;\n  }\n\n  /** Getter that returns a i18n key for the optional form header title. */\n  get headerTitleKey(): string {\n    return 'title';\n  }\n\n  /** I18next options to pass to the header title translation function. */\n  get headerTitleOptions(): Record<string, unknown> {\n    return {\n      ...this.data,\n      context: this.data ? 'existing' : 'new',\n      id: this.data ? getResourceId(this.data._links.self.href) : null,\n    };\n  }\n\n  /** Getter that returns a i18n key for the optional form header subtitle. Note that subtitle is shown only when data is avaiable. */\n  get headerSubtitleKey(): string {\n    return 'subtitle';\n  }\n\n  /** I18next options to pass to the header subtitle translation function. Note that subtitle is shown only when data is avaiable. */\n  get headerSubtitleOptions(): Record<string, unknown> {\n    return this.data ?? {};\n  }\n\n  /** ID that will be written to clipboard when Copy ID button in header is clicked. */\n  get headerCopyIdValue(): string | number {\n    return this.data ? getResourceId(this.data._links.self.href) ?? '' : '';\n  }\n\n  /**\n   * Renders optional form header.\n   * - Customize which actions are rendered with `.renderHeaderActions()` method.\n   * - Customize the header title and subtitle with `.headerTitleKey` and `.headerSubtitleKey` getters.\n   * - Customize the header title and subtitle options with `.headerTitleOptions` and `.headerSubtitleOptions` getters.\n   * - To hide the header completely, add `header` to `hidden-controls` attribute.\n   */\n  renderHeader(): TemplateResult {\n    if (this.hiddenSelector.matches('header', true)) return html``;\n\n    const data = this.data;\n    const actions = data ? this.renderHeaderActions(data) : null;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('header:before')}\n        <h2>\n          <span class=\"flex items-center gap-s leading-xs text-xl font-medium break-all\">\n            <foxy-i18n\n              options=${JSON.stringify(this.headerTitleOptions)}\n              infer=\"header\"\n              key=${this.headerTitleKey}\n            >\n            </foxy-i18n>\n            ${data\n              ? html`\n                  ${this.hiddenSelector.matches('header:copy-id', true)\n                    ? ''\n                    : html`\n                        <foxy-copy-to-clipboard\n                          infer=\"header copy-id\"\n                          class=\"text-m\"\n                          text=${this.headerCopyIdValue}\n                        >\n                        </foxy-copy-to-clipboard>\n                      `}\n                  ${this.hiddenSelector.matches('header:copy-json', true)\n                    ? ''\n                    : html`\n                        <foxy-copy-to-clipboard\n                          infer=\"header copy-json\"\n                          class=\"text-m\"\n                          icon=\"icons:code\"\n                          text=${JSON.stringify(data, null, 2)}\n                        >\n                        </foxy-copy-to-clipboard>\n                      `}\n                `\n              : ''}\n          </span>\n          ${data\n            ? html`\n                <foxy-i18n\n                  infer=\"header\"\n                  class=\"text-m text-secondary\"\n                  key=${this.headerSubtitleKey}\n                  .options=${this.headerSubtitleOptions}\n                >\n                </foxy-i18n>\n                ${actions ? html`<div class=\"mt-xs flex gap-m\">${actions}</div>` : ''}\n              `\n            : ''}\n        </h2>\n        ${this.renderTemplateOrSlot('header:after')}\n      </div>\n    `;\n  }\n\n  /**\n   * Renders form body. This is the method you should implement in your forms\n   * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n   * don't forget to add `super.renderBody()` to your template.\n   */\n  renderBody(): TemplateResult {\n    if (this.data) {\n      const isSnapshotDirty = this.in({ idle: { snapshot: 'dirty' } });\n      const isDeleteHidden = this.hiddenSelector.matches('delete', true);\n      const actionClass = classMap({ 'transition-opacity': true, 'opacity-0': !isSnapshotDirty });\n\n      return html`\n        <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n        ${!isDeleteHidden || isSnapshotDirty\n          ? html`\n              <div class=\"flex gap-s\">\n                <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n                <div class=\"w-full\"></div>\n                <foxy-internal-undo-control class=${actionClass} infer=\"undo\">\n                </foxy-internal-undo-control>\n                <foxy-internal-submit-control class=${actionClass} infer=\"submit\">\n                </foxy-internal-submit-control>\n              </div>\n            `\n          : ''}\n      `;\n    } else {\n      return html`\n        <div class=\"flex\">\n          <foxy-internal-submit-control infer=\"create\" theme=\"primary success\" class=\"ml-auto\">\n          </foxy-internal-submit-control>\n        </div>\n      `;\n    }\n  }\n\n  /**\n   * Renders the entire form. You should probably implement `.renderBody()`\n   * instead of this method in your form to keep the spinner and the common layout features.\n   */\n  render(): TemplateResult {\n    const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) || !this.data);\n\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'space-y-m': true,\n            'transition-opacity': true,\n            'opacity-0 pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n          ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'flex flex-col items-center justify-center gap-m': true,\n            'transition-opacity absolute inset-0': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('fail') ? 'vertical' : 'no-label'}\n            state=${this.in('fail') ? 'error' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n          ${this.href && this.in('fail')\n            ? html`\n                <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n                  <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n                </vaadin-button>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  private get __generalErrors() {\n    const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n    return this.errors.filter(v => v.startsWith(prefix));\n  }\n\n  private __renderGeneralError(err: string) {\n    return html`\n      <foxy-i18n\n        class=\"leading-xs text-body rounded bg-error-10 block\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n        infer=\"error\"\n        key=${err.replace('error:', '')}\n      >\n      </foxy-i18n>\n    `;\n  }\n\n  private __renderStatus({ key, options }: Status) {\n    if (this.hiddenSelector.matches('status', true)) return;\n    return html`\n      <p\n        data-testid=\"status\"\n        class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n        style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n      >\n        <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n        <vaadin-button\n          class=\"flex-shrink-0\"\n          theme=\"success tertiary-inline\"\n          @click=${() => (this.status = null)}\n        >\n          <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n        </vaadin-button>\n      </p>\n    `;\n  }\n}\n"]}

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

@@ -1,7 +1,8 @@
 import '@vaadin/vaadin-button';
 import '../InternalTimestampsControl/index';
-import '../InternalCreateControl/index';
+import '../InternalSubmitControl/index';
 import '../InternalDeleteControl/index';
+import '../InternalUndoControl/index';
 import '../../public/CopyToClipboard/index';
 import '../../public/Spinner/index';
 import '../../public/I18n/index';

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

@@ -1,7 +1,8 @@
 import '@vaadin/vaadin-button';
 import "../InternalTimestampsControl/index.js";
-import "../InternalCreateControl/index.js";
+import "../InternalSubmitControl/index.js";
 import "../InternalDeleteControl/index.js";
+import "../InternalUndoControl/index.js";
 import "../../public/CopyToClipboard/index.js";
 import "../../public/Spinner/index.js";
 import "../../public/I18n/index.js";

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

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

package/dist/elements/internal/{InternalCreateControl/InternalCreateControl.d.ts → InternalSubmitControl/InternalSubmitControl.d.ts}

@@ -4,19 +4,12 @@ import { InternalControl } from '../InternalControl/InternalControl';
  * Internal control displaying a "Create" button that triggers Nucleon form
  * submission on click. The button is disabled if the form is invalid.
  *
- * @since 1.17.0
- * @element foxy-internal-create-control
+ * @since 1.28.0
+ * @element foxy-internal-submit-control
  */
-export declare class InternalCreateControl extends InternalControl {
+export declare class InternalSubmitControl extends InternalControl {
     static get properties(): PropertyDeclarations;
     /** Same as the "theme" attribute of the `vaadin-button` element. */
     theme: string;
     renderControl(): TemplateResult;
-    private get __isCleanTemplateInvalid();
-    private get __isDirtyTemplateInvalid();
-    private get __isCleanSnapshotInvalid();
-    private get __isDirtySnapshotInvalid();
-    private get __isTemplateInvalid();
-    private get __isSnapshotInvalid();
-    private get __isInvalid();
 }

package/dist/elements/internal/InternalSubmitControl/InternalSubmitControl.js

@@ -0,0 +1,34 @@
+import { InternalControl } from "../InternalControl/InternalControl.js";
+import { html } from 'lit-element';
+/**
+ * Internal control displaying a "Create" button that triggers Nucleon form
+ * submission on click. The button is disabled if the form is invalid.
+ *
+ * @since 1.28.0
+ * @element foxy-internal-submit-control
+ */
+export class InternalSubmitControl extends InternalControl {
+    constructor() {
+        super(...arguments);
+        /** Same as the "theme" attribute of the `vaadin-button` element. */
+        this.theme = 'primary';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            theme: { type: String },
+        };
+    }
+    renderControl() {
+        return html `
+      <vaadin-button
+        theme=${this.theme}
+        ?disabled=${this.disabled}
+        @click=${() => { var _a; return (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit(); }}
+      >
+        <foxy-i18n infer="" key="caption"></foxy-i18n>
+      </vaadin-button>
+    `;
+    }
+}
+//# sourceMappingURL=InternalSubmitControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalSubmitControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSubmitControl/InternalSubmitControl.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,8CAA2C;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;;GAMG;AACH,MAAM,OAAO,qBAAsB,SAAQ,eAAe;IAA1D;;QAQE,oEAAoE;QACpE,UAAK,GAAG,SAAS,CAAC;IAapB,CAAC;IArBC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAKD,aAAa;QACX,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,KAAK;oBACN,IAAI,CAAC,QAAQ;iBAChB,GAAG,EAAE,wBAAC,IAAI,CAAC,OAAO,0CAAE,MAAM,KAAE;;;;KAIxC,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult, PropertyDeclarations } from 'lit-element';\n\nimport { InternalControl } from '../InternalControl/InternalControl';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a \"Create\" button that triggers Nucleon form\n * submission on click. The button is disabled if the form is invalid.\n *\n * @since 1.28.0\n * @element foxy-internal-submit-control\n */\nexport class InternalSubmitControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      theme: { type: String },\n    };\n  }\n\n  /** Same as the \"theme\" attribute of the `vaadin-button` element. */\n  theme = 'primary';\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-button\n        theme=${this.theme}\n        ?disabled=${this.disabled}\n        @click=${() => this.nucleon?.submit()}\n      >\n        <foxy-i18n infer=\"\" key=\"caption\"></foxy-i18n>\n      </vaadin-button>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,5 @@
+import '@vaadin/vaadin-button';
+import '../../public/I18n/index';
+import '../InternalControl/index';
+import { InternalSubmitControl } from './InternalSubmitControl';
+export { InternalSubmitControl as InternalSubmitControl };

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

@@ -0,0 +1,7 @@
+import '@vaadin/vaadin-button';
+import "../../public/I18n/index.js";
+import "../InternalControl/index.js";
+import { InternalSubmitControl } from "./InternalSubmitControl.js";
+customElements.define('foxy-internal-submit-control', InternalSubmitControl);
+export { InternalSubmitControl as InternalSubmitControl };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSubmitControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,oCAAiC;AACjC,qCAAkC;AAElC,OAAO,EAAE,qBAAqB,EAAE,mCAAgC;AAEhE,cAAc,CAAC,MAAM,CAAC,8BAA8B,EAAE,qBAAqB,CAAC,CAAC;AAE7E,OAAO,EAAE,qBAAqB,IAAI,qBAAqB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\n\nimport '../../public/I18n/index';\nimport '../InternalControl/index';\n\nimport { InternalSubmitControl } from './InternalSubmitControl';\n\ncustomElements.define('foxy-internal-submit-control', InternalSubmitControl);\n\nexport { InternalSubmitControl as InternalSubmitControl };\n"]}

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

@@ -0,0 +1,15 @@
+import type { TemplateResult, PropertyDeclarations } from 'lit-element';
+import { InternalControl } from '../InternalControl/InternalControl';
+/**
+ * Internal control displaying an "Undo" button that triggers Nucleon undo()
+ * method on click.
+ *
+ * @since 1.28.0
+ * @element foxy-internal-undo-control
+ */
+export declare class InternalUndoControl extends InternalControl {
+    static get properties(): PropertyDeclarations;
+    /** Same as the "theme" attribute of the `vaadin-button` element. */
+    theme: string;
+    renderControl(): TemplateResult;
+}

package/dist/elements/internal/InternalUndoControl/InternalUndoControl.js

@@ -0,0 +1,34 @@
+import { InternalControl } from "../InternalControl/InternalControl.js";
+import { html } from 'lit-element';
+/**
+ * Internal control displaying an "Undo" button that triggers Nucleon undo()
+ * method on click.
+ *
+ * @since 1.28.0
+ * @element foxy-internal-undo-control
+ */
+export class InternalUndoControl extends InternalControl {
+    constructor() {
+        super(...arguments);
+        /** Same as the "theme" attribute of the `vaadin-button` element. */
+        this.theme = 'secondary';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            theme: { type: String },
+        };
+    }
+    renderControl() {
+        return html `
+      <vaadin-button
+        theme=${this.theme}
+        ?disabled=${this.disabled}
+        @click=${() => { var _a; return (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.undo(); }}
+      >
+        <foxy-i18n infer="" key="caption"></foxy-i18n>
+      </vaadin-button>
+    `;
+    }
+}
+//# sourceMappingURL=InternalUndoControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalUndoControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalUndoControl/InternalUndoControl.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,8CAA2C;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;;GAMG;AACH,MAAM,OAAO,mBAAoB,SAAQ,eAAe;IAAxD;;QAQE,oEAAoE;QACpE,UAAK,GAAG,WAAW,CAAC;IAatB,CAAC;IArBC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAKD,aAAa;QACX,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,KAAK;oBACN,IAAI,CAAC,QAAQ;iBAChB,GAAG,EAAE,wBAAC,IAAI,CAAC,OAAO,0CAAE,IAAI,KAAE;;;;KAItC,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult, PropertyDeclarations } from 'lit-element';\n\nimport { InternalControl } from '../InternalControl/InternalControl';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying an \"Undo\" button that triggers Nucleon undo()\n * method on click.\n *\n * @since 1.28.0\n * @element foxy-internal-undo-control\n */\nexport class InternalUndoControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      theme: { type: String },\n    };\n  }\n\n  /** Same as the \"theme\" attribute of the `vaadin-button` element. */\n  theme = 'secondary';\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-button\n        theme=${this.theme}\n        ?disabled=${this.disabled}\n        @click=${() => this.nucleon?.undo()}\n      >\n        <foxy-i18n infer=\"\" key=\"caption\"></foxy-i18n>\n      </vaadin-button>\n    `;\n  }\n}\n"]}

package/dist/elements/internal/{InternalCreateControl → InternalUndoControl}/index.d.ts

@@ -1,5 +1,5 @@
 import '@vaadin/vaadin-button';
 import '../../public/I18n/index';
 import '../InternalControl/index';
-import { InternalCreateControl } from './InternalCreateControl';
-export { InternalCreateControl };
+import { InternalUndoControl } from './InternalUndoControl';
+export { InternalUndoControl };

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

@@ -0,0 +1,7 @@
+import '@vaadin/vaadin-button';
+import "../../public/I18n/index.js";
+import "../InternalControl/index.js";
+import { InternalUndoControl } from "./InternalUndoControl.js";
+customElements.define('foxy-internal-undo-control', InternalUndoControl);
+export { InternalUndoControl };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalUndoControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,oCAAiC;AACjC,qCAAkC;AAElC,OAAO,EAAE,mBAAmB,EAAE,iCAA8B;AAE5D,cAAc,CAAC,MAAM,CAAC,4BAA4B,EAAE,mBAAmB,CAAC,CAAC;AAEzE,OAAO,EAAE,mBAAmB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\n\nimport '../../public/I18n/index';\nimport '../InternalControl/index';\n\nimport { InternalUndoControl } from './InternalUndoControl';\n\ncustomElements.define('foxy-internal-undo-control', InternalUndoControl);\n\nexport { InternalUndoControl };\n"]}

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

@@ -1,4 +1,4 @@
-import { Data, Templates } from './types';
+import { Data } from './types';
 import { TemplateResult } from 'lit-element';
 import { NucleonElement } from '../NucleonElement/NucleonElement';
 import { NucleonV8N } from '../NucleonElement/types';
@@ -10,21 +10,11 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
 /**
  * Email-based "forgot password" form.
  *
- * @slot email:before
- * @slot email:after
- *
- * @slot message:before
- * @slot message:after
- *
- * @slot submit:before
- * @slot submit:after
- *
  * @element foxy-access-recovery-form
  * @since 1.4.0
  */
 export declare class AccessRecoveryForm extends Base<Data> {
     static get v8n(): NucleonV8N<Data>;
-    templates: Templates;
     private readonly __checkEmailValidity;
     private readonly __renderEmail;
     private readonly __renderMessage;

package/dist/elements/public/AccessRecoveryForm/AccessRecoveryForm.js

@@ -11,22 +11,12 @@ const Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement,
 /**
  * Email-based "forgot password" form.
  *
- * @slot email:before
- * @slot email:after
- *
- * @slot message:before
- * @slot message:after
- *
- * @slot submit:before
- * @slot submit:after
- *
  * @element foxy-access-recovery-form
  * @since 1.4.0
  */
 export class AccessRecoveryForm extends Base {
     constructor() {
         super(...arguments);
-        this.templates = {};
         this.__checkEmailValidity = () => {
             return !this.errors.some(err => err.startsWith('email'));
         };

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

@@ -1 +1 @@
-{"version":3,"file":"AccessRecoveryForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AccessRecoveryForm/AccessRecoveryForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { EmailFieldElement } from '@vaadin/vaadin-text-field/vaadin-email-field';\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 { validate as isEmail } from 'email-validator';\n\nconst NS = 'access-recovery-form';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Email-based \"forgot password\" form.\n *\n * @slot email:before\n * @slot email:after\n *\n * @slot message:before\n * @slot message:after\n *\n * @slot submit:before\n * @slot submit:after\n *\n * @element foxy-access-recovery-form\n * @since 1.4.0\n */\nexport class AccessRecoveryForm extends Base<Data> {\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ detail: d }) => (d?.email && d.email.length > 0) || 'email_required',\n      ({ detail: d }) => isEmail(d?.email ?? '') || 'email_invalid_email',\n    ];\n  }\n\n  templates: Templates = {};\n\n  private readonly __checkEmailValidity = () => {\n    return !this.errors.some(err => err.startsWith('email'));\n  };\n\n  private readonly __renderEmail = () => {\n    const isFailed = this.in('fail');\n    const isBusy = this.in('busy');\n    const isDone = this.in({ idle: 'snapshot' });\n\n    const emailErrors = this.errors.filter(error => error.startsWith('email'));\n    const emailErrorKeys = emailErrors.map(error => error.replace('email', 'v8n'));\n    const emailErrorMessage = emailErrorKeys[0] ? this.t(emailErrorKeys[0]).toString() : '';\n\n    const handleKeyDown = (evt: KeyboardEvent) => {\n      if (evt.key === 'Enter') this.submit();\n    };\n\n    const handleInput = (evt: InputEvent) => {\n      this.edit({\n        detail: { email: (evt.target as EmailFieldElement).value },\n        type: 'email',\n      });\n    };\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('email:before')}\n\n        <vaadin-email-field\n          error-message=${emailErrorMessage}\n          data-testid=\"email\"\n          class=\"w-full\"\n          label=${this.t('email').toString()}\n          value=${ifDefined(this.form.detail?.email)}\n          ?disabled=${isBusy || isDone || isFailed || this.disabledSelector.matches('email', true)}\n          ?readonly=${this.readonlySelector.matches('email', true)}\n          .checkValidity=${this.__checkEmailValidity}\n          @input=${handleInput}\n          @keydown=${handleKeyDown}\n        >\n        </vaadin-email-field>\n\n        ${this.renderTemplateOrSlot('email:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderMessage = () => {\n    const isFailed = this.in('fail');\n    const color = isFailed ? 'bg-error-10 text-error' : 'bg-success-10 text-success';\n    const icon = isFailed ? 'lumo:error' : 'lumo:cog';\n    const key = isFailed ? 'unknown_error' : 'recover_access_success';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('message:before')}\n\n        <p class=\"leading-s flex items-start text-s rounded p-s ${color}\">\n          <iron-icon class=\"flex-shrink-0 icon-inline text-l mr-s\" icon=${icon}></iron-icon>\n          <foxy-i18n lang=${this.lang} key=${key} ns=${this.ns} data-testid=\"message\"></foxy-i18n>\n        </p>\n\n        ${this.renderTemplateOrSlot('message:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderSubmit = () => {\n    const isFailed = this.in('fail');\n    const isValid = this.errors.length === 0;\n    const isBusy = this.in('busy');\n    const isDone = this.in({ idle: 'snapshot' });\n    const isDisabledByForm = isBusy || isDone || !isValid || isFailed;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('submit:before')}\n\n        <vaadin-button\n          data-testid=\"submit\"\n          class=\"w-full\"\n          theme=\"primary\"\n          ?disabled=${isDisabledByForm || this.disabledSelector.matches('submit', true)}\n          @click=${() => this.submit()}\n        >\n          <foxy-i18n lang=${this.lang} key=\"recover_access\" ns=${this.ns}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('submit:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const isDone = this.in({ idle: 'snapshot' }) || this.in('fail');\n    const isBusy = this.in('busy');\n\n    return html`\n      <main\n        data-testid=\"wrapper\"\n        aria-live=\"polite\"\n        aria-busy=${isBusy}\n        class=\"relative font-lumo text-m leading-m space-y-m\"\n      >\n        ${hiddenSelector.matches('email', true) ? '' : this.__renderEmail()}\n        ${hiddenSelector.matches('message', true) || !isDone ? '' : this.__renderMessage()}\n        ${hiddenSelector.matches('submit', true) ? '' : this.__renderSubmit()}\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,\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=\"busy\"\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </main>\n    `;\n  }\n\n  protected async _sendPost(edits: Partial<Data>): Promise<Data> {\n    const body = JSON.stringify(edits);\n    const data = await this._fetch(this.parent, { body, method: 'POST' });\n\n    const rumour = NucleonElement.Rumour(this.group);\n    const related = [...this.related, this.parent];\n    rumour.share({ data, related, source: data._links.self.href });\n\n    return data;\n  }\n}\n"]}
+{"version":3,"file":"AccessRecoveryForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AccessRecoveryForm/AccessRecoveryForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data } from './types';\nimport { TemplateResult, html } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { EmailFieldElement } from '@vaadin/vaadin-text-field/vaadin-email-field';\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 { validate as isEmail } from 'email-validator';\n\nconst NS = 'access-recovery-form';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Email-based \"forgot password\" form.\n *\n * @element foxy-access-recovery-form\n * @since 1.4.0\n */\nexport class AccessRecoveryForm extends Base<Data> {\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ detail: d }) => (d?.email && d.email.length > 0) || 'email_required',\n      ({ detail: d }) => isEmail(d?.email ?? '') || 'email_invalid_email',\n    ];\n  }\n\n  private readonly __checkEmailValidity = () => {\n    return !this.errors.some(err => err.startsWith('email'));\n  };\n\n  private readonly __renderEmail = () => {\n    const isFailed = this.in('fail');\n    const isBusy = this.in('busy');\n    const isDone = this.in({ idle: 'snapshot' });\n\n    const emailErrors = this.errors.filter(error => error.startsWith('email'));\n    const emailErrorKeys = emailErrors.map(error => error.replace('email', 'v8n'));\n    const emailErrorMessage = emailErrorKeys[0] ? this.t(emailErrorKeys[0]).toString() : '';\n\n    const handleKeyDown = (evt: KeyboardEvent) => {\n      if (evt.key === 'Enter') this.submit();\n    };\n\n    const handleInput = (evt: InputEvent) => {\n      this.edit({\n        detail: { email: (evt.target as EmailFieldElement).value },\n        type: 'email',\n      });\n    };\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('email:before')}\n\n        <vaadin-email-field\n          error-message=${emailErrorMessage}\n          data-testid=\"email\"\n          class=\"w-full\"\n          label=${this.t('email').toString()}\n          value=${ifDefined(this.form.detail?.email)}\n          ?disabled=${isBusy || isDone || isFailed || this.disabledSelector.matches('email', true)}\n          ?readonly=${this.readonlySelector.matches('email', true)}\n          .checkValidity=${this.__checkEmailValidity}\n          @input=${handleInput}\n          @keydown=${handleKeyDown}\n        >\n        </vaadin-email-field>\n\n        ${this.renderTemplateOrSlot('email:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderMessage = () => {\n    const isFailed = this.in('fail');\n    const color = isFailed ? 'bg-error-10 text-error' : 'bg-success-10 text-success';\n    const icon = isFailed ? 'lumo:error' : 'lumo:cog';\n    const key = isFailed ? 'unknown_error' : 'recover_access_success';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('message:before')}\n\n        <p class=\"leading-s flex items-start text-s rounded p-s ${color}\">\n          <iron-icon class=\"flex-shrink-0 icon-inline text-l mr-s\" icon=${icon}></iron-icon>\n          <foxy-i18n lang=${this.lang} key=${key} ns=${this.ns} data-testid=\"message\"></foxy-i18n>\n        </p>\n\n        ${this.renderTemplateOrSlot('message:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderSubmit = () => {\n    const isFailed = this.in('fail');\n    const isValid = this.errors.length === 0;\n    const isBusy = this.in('busy');\n    const isDone = this.in({ idle: 'snapshot' });\n    const isDisabledByForm = isBusy || isDone || !isValid || isFailed;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('submit:before')}\n\n        <vaadin-button\n          data-testid=\"submit\"\n          class=\"w-full\"\n          theme=\"primary\"\n          ?disabled=${isDisabledByForm || this.disabledSelector.matches('submit', true)}\n          @click=${() => this.submit()}\n        >\n          <foxy-i18n lang=${this.lang} key=\"recover_access\" ns=${this.ns}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('submit:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const isDone = this.in({ idle: 'snapshot' }) || this.in('fail');\n    const isBusy = this.in('busy');\n\n    return html`\n      <main\n        data-testid=\"wrapper\"\n        aria-live=\"polite\"\n        aria-busy=${isBusy}\n        class=\"relative font-lumo text-m leading-m space-y-m\"\n      >\n        ${hiddenSelector.matches('email', true) ? '' : this.__renderEmail()}\n        ${hiddenSelector.matches('message', true) || !isDone ? '' : this.__renderMessage()}\n        ${hiddenSelector.matches('submit', true) ? '' : this.__renderSubmit()}\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,\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=\"busy\"\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </main>\n    `;\n  }\n\n  protected async _sendPost(edits: Partial<Data>): Promise<Data> {\n    const body = JSON.stringify(edits);\n    const data = await this._fetch(this.parent, { body, method: 'POST' });\n\n    const rumour = NucleonElement.Rumour(this.group);\n    const related = [...this.related, this.parent];\n    rumour.share({ data, related, source: data._links.self.href });\n\n    return data;\n  }\n}\n"]}

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

@@ -1,6 +1,4 @@
 import { Resource } from '@foxy.io/sdk/core';
-import { Renderer } from '../../../mixins/configurable';
-import { AccessRecoveryForm } from './AccessRecoveryForm';
 declare type Rel = {
     links: {
         self: Rel;
@@ -13,12 +11,4 @@ declare type Rel = {
     };
 };
 export declare type Data = Resource<Rel>;
-export declare type Templates = {
-    'email:before'?: Renderer<AccessRecoveryForm>;
-    'email:after'?: Renderer<AccessRecoveryForm>;
-    'message:before'?: Renderer<AccessRecoveryForm>;
-    'message:after'?: Renderer<AccessRecoveryForm>;
-    'submit:before'?: Renderer<AccessRecoveryForm>;
-    'submit:after'?: Renderer<AccessRecoveryForm>;
-};
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/AccessRecoveryForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Resource } from '@foxy.io/sdk/core';\nimport { Renderer } from '../../../mixins/configurable';\nimport { AccessRecoveryForm } from './AccessRecoveryForm';\n\ntype Rel = {\n  links: { self: Rel };\n  props: {\n    type: 'email';\n    detail: { email: string };\n  };\n};\n\nexport type Data = Resource<Rel>;\nexport type Templates = {\n  'email:before'?: Renderer<AccessRecoveryForm>;\n  'email:after'?: Renderer<AccessRecoveryForm>;\n  'message:before'?: Renderer<AccessRecoveryForm>;\n  'message:after'?: Renderer<AccessRecoveryForm>;\n  'submit:before'?: Renderer<AccessRecoveryForm>;\n  'submit:after'?: Renderer<AccessRecoveryForm>;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/AccessRecoveryForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Resource } from '@foxy.io/sdk/core';\n\ntype Rel = {\n  links: { self: Rel };\n  props: {\n    type: 'email';\n    detail: { email: string };\n  };\n};\n\nexport type Data = Resource<Rel>;\n"]}

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

@@ -1,4 +1,4 @@
-import { Data, Templates } from './types';
+import { Data } from './types';
 import { TemplateResult } from 'lit-html';
 import { NucleonElement } from '../NucleonElement/NucleonElement';
 declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
@@ -9,26 +9,10 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
 /**
  * Card element displaying a customer address.
  *
- * @slot address-name:before - **new in v1.4.0**
- * @slot address-name:after - **new in v1.4.0**
- *
- * @slot full-name:before - **new in v1.4.0**
- * @slot full-name:after - **new in v1.4.0**
- *
- * @slot full-address:before - **new in v1.4.0**
- * @slot full-address:after - **new in v1.4.0**
- *
- * @slot company:before - **new in v1.4.0**
- * @slot company:after - **new in v1.4.0**
- *
- * @slot phone:before - **new in v1.4.0**
- * @slot phone:after - **new in v1.4.0**
- *
  * @element foxy-address-card
  * @since 1.2.0
  */
 export declare class AddressCard extends Base<Data> {
-    templates: Templates;
     private readonly __renderAddressName;
     private readonly __renderLine;
     private readonly __renderFullName;

package/dist/elements/public/AddressCard/AddressCard.js

@@ -9,28 +9,12 @@ const Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement,
 /**
  * Card element displaying a customer address.
  *
- * @slot address-name:before - **new in v1.4.0**
- * @slot address-name:after - **new in v1.4.0**
- *
- * @slot full-name:before - **new in v1.4.0**
- * @slot full-name:after - **new in v1.4.0**
- *
- * @slot full-address:before - **new in v1.4.0**
- * @slot full-address:after - **new in v1.4.0**
- *
- * @slot company:before - **new in v1.4.0**
- * @slot company:after - **new in v1.4.0**
- *
- * @slot phone:before - **new in v1.4.0**
- * @slot phone:after - **new in v1.4.0**
- *
  * @element foxy-address-card
  * @since 1.2.0
  */
 export class AddressCard extends Base {
     constructor() {
         super(...arguments);
-        this.templates = {};
         this.__renderAddressName = () => {
             var _a, _b, _c;
             const isDefaultBilling = !!((_a = this.data) === null || _a === void 0 ? void 0 : _a.is_default_billing);