@foxy.io/elements 1.16.0-beta.5 → 1.16.0-beta.8

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

@@ -1,12 +1,20 @@
-import type { HALJSONResource } from '../../public/NucleonElement/types';
+import type { HALJSONResource as Data } from '../../public/NucleonElement/types';
 import type { TemplateResult } from 'lit-html';
 import { NucleonElement } from '../../public/NucleonElement/NucleonElement';
-declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
-    defaultNS: string;
-} & {
+declare const InternalCard_base: typeof NucleonElement & {
     styles: import("lit-element").CSSResultArray;
-} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
-export declare class InternalCard<TData extends HALJSONResource> extends Base<TData> {
+};
+/**
+ * Internal base element for cards.
+ *
+ * @since 1.17.0
+ * @tag foxy-internal-card
+ */
+export declare class InternalCard<TData extends Data> extends InternalCard_base<TData> {
+    /**
+     * Invoked together with `.render()` to obtain a template for card contents.
+     * When extending `InternalCard`, prefer overriding this method to `.render()`.
+     */
     renderBody(): TemplateResult;
     render(): TemplateResult;
 }

package/dist/elements/internal/InternalCard/InternalCard.js

@@ -1,17 +1,28 @@
-import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { NucleonElement } from "../../public/NucleonElement/NucleonElement.js";
 import { classMap } from "../../../utils/class-map.js";
 import { html } from 'lit-html';
-const Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));
-export class InternalCard extends Base {
+/**
+ * Internal base element for cards.
+ *
+ * @since 1.17.0
+ * @tag foxy-internal-card
+ */
+export class InternalCard extends ThemeableMixin(NucleonElement) {
+    /**
+     * Invoked together with `.render()` to obtain a template for card contents.
+     * When extending `InternalCard`, prefer overriding this method to `.render()`.
+     */
     renderBody() {
         return html ``;
     }
     render() {
         return html `
-      <div aria-busy=${this.in('busy')} aria-live="polite" class="relative">
+      <div
+        aria-busy=${this.in('busy')}
+        aria-live="polite"
+        class="relative leading-m text-body text-m font-lumo"
+      >
         <div
           class=${classMap({
             'transition duration-500 ease-in-out': true,
@@ -29,10 +40,9 @@ export class InternalCard extends Base {
         >
           <foxy-spinner
             layout=${this.in('busy') ? 'no-label' : 'horizontal'}
-            class="m-auto"
             state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}
-            lang=${this.lang}
-            ns="${this.ns} spinner"
+            class="m-auto"
+            infer="spinner"
           >
           </foxy-spinner>
         </div>

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

@@ -1 +1 @@
-{"version":3,"file":"InternalCard.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCard/InternalCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;AAElF,MAAM,OAAO,YAA4C,SAAQ,IAAW;IAC1E,UAAU;QACR,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;kBAEpB,QAAQ,CAAC;YACf,qCAAqC,EAAE,IAAI;YAC3C,+BAA+B,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;SAChE,CAAC;;YAEA,IAAI,CAAC,UAAU,EAAE;;;;kBAIX,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,+BAA+B,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;SAC/D,CAAC;;;qBAGS,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;;oBAE5C,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;mBAC7E,IAAI,CAAC,IAAI;kBACV,IAAI,CAAC,EAAE;;;;;KAKpB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));\n\nexport class InternalCard<TData extends HALJSONResource> extends Base<TData> {\n  renderBody(): TemplateResult {\n    return html``;\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'transition duration-500 ease-in-out': true,\n            'opacity-0 pointer-events-none': !this.in({ idle: 'snapshot' }),\n          })}\n        >\n          ${this.renderBody()}\n        </div>\n\n        <div\n          class=${classMap({\n            'transition duration-500 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': this.in({ idle: 'snapshot' }),\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('busy') ? 'no-label' : 'horizontal'}\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            lang=${this.lang}\n            ns=\"${this.ns} spinner\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalCard.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCard/InternalCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,OAAO,YAAiC,SAAQ,cAAc,CAAC,cAAc,CAAQ;IACzF;;;OAGG;IACH,UAAU;QACR,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;;;kBAKjB,QAAQ,CAAC;YACf,qCAAqC,EAAE,IAAI;YAC3C,+BAA+B,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;SAChE,CAAC;;YAEA,IAAI,CAAC,UAAU,EAAE;;;;kBAIX,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,+BAA+B,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;SAC/D,CAAC;;;qBAGS,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;oBAC5C,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;;;;KAO3F,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { HALJSONResource as Data } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\n\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\n/**\n * Internal base element for cards.\n *\n * @since 1.17.0\n * @tag foxy-internal-card\n */\nexport class InternalCard<TData extends Data> extends ThemeableMixin(NucleonElement)<TData> {\n  /**\n   * Invoked together with `.render()` to obtain a template for card contents.\n   * When extending `InternalCard`, prefer overriding this method to `.render()`.\n   */\n  renderBody(): TemplateResult {\n    return html``;\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative leading-m text-body text-m font-lumo\"\n      >\n        <div\n          class=${classMap({\n            'transition duration-500 ease-in-out': true,\n            'opacity-0 pointer-events-none': !this.in({ idle: 'snapshot' }),\n          })}\n        >\n          ${this.renderBody()}\n        </div>\n\n        <div\n          class=${classMap({\n            'transition duration-500 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': this.in({ idle: 'snapshot' }),\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('busy') ? 'no-label' : 'horizontal'}\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            class=\"m-auto\"\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,22 @@
+import type { TemplateResult, PropertyDeclarations } from 'lit-element';
+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
+ * @tag foxy-internal-create-control
+ */
+export declare class InternalCreateControl 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/{InternalForm/internal/InternalCreateControl → InternalCreateControl}/InternalCreateControl.js

@@ -1,20 +1,33 @@
-import { InternalControl } from "../../../InternalControl/InternalControl.js";
+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.17.0
+ * @tag foxy-internal-create-control
+ */
 export class InternalCreateControl extends InternalControl {
     constructor() {
         super(...arguments);
-        this.infer = 'create';
+        /** Same as the "theme" attribute of the `vaadin-button` element. */
+        this.theme = 'primary success';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            theme: { type: String },
+        };
     }
     renderControl() {
         return html `
       <vaadin-button
-        data-testid="create"
         class="w-full"
-        theme="primary success"
+        theme=${this.theme}
         ?disabled=${this.disabled || this.__isInvalid}
         @click=${() => { var _a; return (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit(); }}
       >
-        <foxy-i18n ns=${this.ns} key="create" lang=${this.lang}></foxy-i18n>
+        <foxy-i18n infer="" key="create"></foxy-i18n>
       </vaadin-button>
     `;
     }

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalCreateControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCreateControl/InternalCreateControl.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,iBAAiB,CAAC;IA0C5B,CAAC;IAlDC,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;;;gBAGC,IAAI,CAAC,KAAK;oBACN,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW;iBACpC,GAAG,EAAE,wBAAC,IAAI,CAAC,OAAO,0CAAE,MAAM,KAAE;;;;KAIxC,CAAC;IACJ,CAAC;IAED,IAAY,wBAAwB;;QAClC,OAAO,CAAC,QAAC,IAAI,CAAC,OAAO,0CAAE,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,EAAC,CAAC;IAC1E,CAAC;IAED,IAAY,wBAAwB;;QAClC,OAAO,CAAC,QAAC,IAAI,CAAC,OAAO,0CAAE,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,EAAC,CAAC;IAC1E,CAAC;IAED,IAAY,wBAAwB;;QAClC,OAAO,CAAC,QAAC,IAAI,CAAC,OAAO,0CAAE,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,EAAC,CAAC;IAC1E,CAAC;IAED,IAAY,wBAAwB;;QAClC,OAAO,CAAC,QAAC,IAAI,CAAC,OAAO,0CAAE,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,EAAC,CAAC;IAC1E,CAAC;IAED,IAAY,mBAAmB;QAC7B,OAAO,IAAI,CAAC,wBAAwB,IAAI,IAAI,CAAC,wBAAwB,CAAC;IACxE,CAAC;IAED,IAAY,mBAAmB;QAC7B,OAAO,IAAI,CAAC,wBAAwB,IAAI,IAAI,CAAC,wBAAwB,CAAC;IACxE,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,mBAAmB,CAAC;IAC9D,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.17.0\n * @tag foxy-internal-create-control\n */\nexport class InternalCreateControl 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 success';\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-button\n        class=\"w-full\"\n        theme=${this.theme}\n        ?disabled=${this.disabled || this.__isInvalid}\n        @click=${() => this.nucleon?.submit()}\n      >\n        <foxy-i18n infer=\"\" key=\"create\"></foxy-i18n>\n      </vaadin-button>\n    `;\n  }\n\n  private get __isCleanTemplateInvalid() {\n    return !!this.nucleon?.in({ idle: { template: { clean: 'invalid' } } });\n  }\n\n  private get __isDirtyTemplateInvalid() {\n    return !!this.nucleon?.in({ idle: { template: { dirty: 'invalid' } } });\n  }\n\n  private get __isCleanSnapshotInvalid() {\n    return !!this.nucleon?.in({ idle: { snapshot: { clean: 'invalid' } } });\n  }\n\n  private get __isDirtySnapshotInvalid() {\n    return !!this.nucleon?.in({ idle: { snapshot: { dirty: 'invalid' } } });\n  }\n\n  private get __isTemplateInvalid() {\n    return this.__isCleanTemplateInvalid || this.__isDirtyTemplateInvalid;\n  }\n\n  private get __isSnapshotInvalid() {\n    return this.__isCleanSnapshotInvalid || this.__isDirtySnapshotInvalid;\n  }\n\n  private get __isInvalid() {\n    return this.__isSnapshotInvalid || this.__isTemplateInvalid;\n  }\n}\n"]}

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

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

package/dist/elements/internal/{InternalForm/internal/InternalCreateControl → InternalCreateControl}/index.js

@@ -1,4 +1,4 @@
-import "../../../../public/I18n/index.js";
+import "../../public/I18n/index.js";
 import '@vaadin/vaadin-button';
 import { InternalCreateControl } from "./InternalCreateControl.js";
 customElements.define('foxy-internal-create-control', InternalCreateControl);

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

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

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

@@ -0,0 +1,8 @@
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import { InternalControl } from '../InternalControl/InternalControl';
+export declare class InternalDeleteControl extends InternalControl {
+    static get properties(): PropertyDeclarations;
+    infer: string;
+    theme: string;
+    renderControl(): TemplateResult;
+}

package/dist/elements/internal/{InternalForm/internal/InternalDeleteControl → InternalDeleteControl}/InternalDeleteControl.js

@@ -1,9 +1,16 @@
-import { InternalControl } from "../../../InternalControl/InternalControl.js";
+import { InternalControl } from "../InternalControl/InternalControl.js";
 import { html } from 'lit-element';
 export class InternalDeleteControl extends InternalControl {
     constructor() {
         super(...arguments);
         this.infer = 'delete';
+        this.theme = 'primary error';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            theme: { type: String },
+        };
     }
     renderControl() {
         return html `
@@ -23,7 +30,7 @@ export class InternalDeleteControl extends InternalControl {
 
       <vaadin-button
         data-testid="delete"
-        theme="primary error"
+        theme=${this.theme}
         class="w-full"
         ?disabled=${this.disabled || this.readonly}
         @click=${(evt) => {

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalDeleteControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalDeleteControl/InternalDeleteControl.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,8CAA2C;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,MAAM,OAAO,qBAAsB,SAAQ,eAAe;IAA1D;;QAQE,UAAK,GAAG,QAAQ,CAAC;QAEjB,UAAK,GAAG,eAAe,CAAC;IAgC1B,CAAC;IAzCC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAMD,aAAa;QACX,OAAO,IAAI,CAAA;;;;;;;;eAQA,IAAI,CAAC,IAAI;aACX,IAAI,CAAC,EAAE;;gBAEJ,CAAC,GAAoB,EAAE,EAAE,WAAC,OAAA,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;;;;;;gBAMzE,IAAI,CAAC,KAAK;;oBAEN,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;iBACjC,CAAC,GAAgB,EAAE,EAAE;YAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAA0B,CAAC;YACnF,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,aAA8B,CAAC,CAAC;QACnD,CAAC;;wBAEe,IAAI,CAAC,EAAE,sBAAsB,IAAI,CAAC,IAAI;;KAEzD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { InternalConfirmDialog } from '../InternalConfirmDialog/InternalConfirmDialog';\nimport type { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { ButtonElement } from '@vaadin/vaadin-button';\n\nimport { InternalControl } from '../InternalControl/InternalControl';\nimport { html } from 'lit-element';\n\nexport class InternalDeleteControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      theme: { type: String },\n    };\n  }\n\n  infer = 'delete';\n\n  theme = 'primary error';\n\n  renderControl(): TemplateResult {\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=${this.lang}\n        ns=${this.ns}\n        id=\"confirm\"\n        @hide=${(evt: DialogHideEvent) => !evt.detail.cancelled && this.nucleon?.delete()}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <vaadin-button\n        data-testid=\"delete\"\n        theme=${this.theme}\n        class=\"w-full\"\n        ?disabled=${this.disabled || this.readonly}\n        @click=${(evt: CustomEvent) => {\n          const confirm = this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n          confirm.show(evt.currentTarget as ButtonElement);\n        }}\n      >\n        <foxy-i18n ns=${this.ns} key=\"delete\" lang=${this.lang}></foxy-i18n>\n      </vaadin-button>\n    `;\n  }\n}\n"]}

package/dist/elements/internal/{InternalForm/internal/InternalDeleteControl → InternalDeleteControl}/index.d.ts

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

package/dist/elements/internal/{InternalForm/internal/InternalDeleteControl → InternalDeleteControl}/index.js

@@ -1,5 +1,5 @@
-import "../../../InternalConfirmDialog/index.js";
-import "../../../../public/I18n/index.js";
+import "../InternalConfirmDialog/index.js";
+import "../../public/I18n/index.js";
 import '@vaadin/vaadin-button';
 import { InternalDeleteControl } from "./InternalDeleteControl.js";
 customElements.define('foxy-internal-delete-control', InternalDeleteControl);

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

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

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

@@ -0,0 +1,22 @@
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import { LitElement } from 'lit-element';
+declare const InternalDetails_base: typeof LitElement & import("lit-element").Constructor<import("../../../mixins/inferrable").InferrableMixinHost> & {
+    inferredProperties: string[];
+} & {
+    styles: import("lit-element").CSSResultArray;
+};
+/**
+ * Internal details/summary control.
+ *
+ * @since 1.17.0
+ * @tag foxy-internal-details
+ */
+export declare class InternalDetails extends InternalDetails_base {
+    static get properties(): PropertyDeclarations;
+    /** i18n key for summary text. */
+    summary: string | null;
+    /** Same as `HTMLDetailsElement['open']`. */
+    open: boolean;
+    render(): TemplateResult;
+}
+export {};

package/dist/elements/internal/{InternalCollapsibleCard/InternalCollapsibleCard.js → InternalDetails/InternalDetails.js}

@@ -1,12 +1,19 @@
 import { html, LitElement } from 'lit-element';
 import { InferrableMixin } from "../../../mixins/inferrable.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
-import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { classMap } from "../../../utils/class-map.js";
-export class InternalCollapsibleCard extends ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement))) {
+/**
+ * Internal details/summary control.
+ *
+ * @since 1.17.0
+ * @tag foxy-internal-details
+ */
+export class InternalDetails extends ThemeableMixin(InferrableMixin(LitElement)) {
     constructor() {
         super(...arguments);
-        this.summary = '';
+        /** i18n key for summary text. */
+        this.summary = null;
+        /** Same as `HTMLDetailsElement['open']`. */
         this.open = false;
     }
     static get properties() {
@@ -17,6 +24,7 @@ export class InternalCollapsibleCard extends ThemeableMixin(TranslatableMixin(In
         };
     }
     render() {
+        var _a;
         return html `
       <details
         class="w-full border border-contrast-10 rounded-t-l rounded-b-l"
@@ -37,8 +45,8 @@ export class InternalCollapsibleCard extends ThemeableMixin(TranslatableMixin(In
             <div class="flex items-center flex-1">
               <foxy-i18n
                 class="flex items-center text-xs tracking-wide uppercase font-bold text-body"
-                key=${this.summary}
-                infer
+                infer=""
+                key=${(_a = this.summary) !== null && _a !== void 0 ? _a : ''}
               >
               </foxy-i18n>
 
@@ -60,4 +68,4 @@ export class InternalCollapsibleCard extends ThemeableMixin(TranslatableMixin(In
     `;
     }
 }
-//# sourceMappingURL=InternalCollapsibleCard.js.map
+//# sourceMappingURL=InternalDetails.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalDetails.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalDetails/InternalDetails.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,eAAgB,SAAQ,cAAc,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;IAAhF;;QASE,iCAAiC;QACjC,YAAO,GAAkB,IAAI,CAAC;QAE9B,4CAA4C;QAC5C,SAAI,GAAG,KAAK,CAAC;IA6Cf,CAAC;IAzDC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SACxB,CAAC;IACJ,CAAC;IAQD,MAAM;;QACJ,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,IAAI;kBACP,CAAC,GAAU,EAAE,EAAE;YACvB,IAAI,CAAC,IAAI,GAAI,GAAG,CAAC,aAAoC,CAAC,IAAI,CAAC;QAC7D,CAAC;;;kBAGS,QAAQ,CAAC;YACf,wEAAwE,EAAE,IAAI;YAC9E,sDAAsD,EAAE,IAAI;YAC5D,aAAa,EAAE,IAAI;YACnB,aAAa,EAAE,CAAC,IAAI,CAAC,IAAI;SAC1B,CAAC;;;;;;;sBAOU,MAAA,IAAI,CAAC,OAAO,mCAAI,EAAE;;;;;;;;;mCASL,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;;;;;;;;KAUzD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { html, LitElement } from 'lit-element';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { classMap } from '../../../utils/class-map';\n\n/**\n * Internal details/summary control.\n *\n * @since 1.17.0\n * @tag foxy-internal-details\n */\nexport class InternalDetails extends ThemeableMixin(InferrableMixin(LitElement)) {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      summary: { type: String },\n      open: { type: Boolean },\n    };\n  }\n\n  /** i18n key for summary text. */\n  summary: string | null = null;\n\n  /** Same as `HTMLDetailsElement['open']`. */\n  open = false;\n\n  render(): TemplateResult {\n    return html`\n      <details\n        class=\"w-full border border-contrast-10 rounded-t-l rounded-b-l\"\n        ?open=${this.open}\n        @toggle=${(evt: Event) => {\n          this.open = (evt.currentTarget as HTMLDetailsElement).open;\n        }}\n      >\n        <summary\n          class=${classMap({\n            'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,\n            'transition-colors cursor-pointer hover-bg-contrast-5': true,\n            'rounded-t-l': true,\n            'rounded-b-l': !this.open,\n          })}\n        >\n          <div class=\"flex items-center h-m pl-m pr-s\">\n            <div class=\"flex items-center flex-1\">\n              <foxy-i18n\n                class=\"flex items-center text-xs tracking-wide uppercase font-bold text-body\"\n                infer=\"\"\n                key=${this.summary ?? ''}\n              >\n              </foxy-i18n>\n\n              <slot name=\"actions\"></slot>\n            </div>\n\n            <iron-icon\n              class=\"icon-inline text-xl text-body\"\n              icon=\"icons:expand-${this.open ? 'less' : 'more'}\"\n            >\n            </iron-icon>\n          </div>\n        </summary>\n\n        <div class=\"border-t border-contrast-10\">\n          <slot></slot>\n        </div>\n      </details>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,6 @@
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import '../InternalControl/index';
+import '../../public/I18n/index';
+import { InternalDetails as Control } from './InternalDetails';
+export { Control as InternalDetails };

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

@@ -0,0 +1,8 @@
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import "../InternalControl/index.js";
+import "../../public/I18n/index.js";
+import { InternalDetails as Control } from "./InternalDetails.js";
+customElements.define('foxy-internal-details', Control);
+export { Control as InternalDetails };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalDetails/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAE5B,qCAAkC;AAClC,oCAAiC;AAEjC,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,6BAA0B;AAE/D,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,OAAO,CAAC,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,CAAC","sourcesContent":["import '@polymer/iron-icons';\nimport '@polymer/iron-icon';\n\nimport '../InternalControl/index';\nimport '../../public/I18n/index';\n\nimport { InternalDetails as Control } from './InternalDetails';\n\ncustomElements.define('foxy-internal-details', Control);\n\nexport { Control as InternalDetails };\n"]}

package/dist/elements/internal/InternalEditableControl/InternalEditableControl.js

@@ -69,7 +69,7 @@ export class InternalEditableControl extends InternalControl {
         return (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.errors.find(v => v.startsWith(this.v8nPrefix));
     }
     get _errorMessage() {
-        return this._error ? this.t(this._error.substring(0, this.v8nPrefix.length)) : undefined;
+        return this._error ? this.t(this._error.substring(this.v8nPrefix.length)) : undefined;
     }
     get _checkValidity() {
         return () => !this._error;

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

@@ -1 +1 @@
-{"version":3,"file":"InternalEditableControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableControl/InternalEditableControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport { InternalControl } from '../InternalControl/InternalControl';\n\nexport class InternalEditableControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __placeholder: { attribute: false },\n      __helperText: { attribute: false },\n      __v8nPrefix: { attribute: false },\n      __property: { attribute: false },\n      __label: { attribute: false },\n      placeholder: { type: String, noAccessor: true },\n      helperText: { type: String, attribute: 'helper-text', noAccessor: true },\n      v8nPrefix: { type: String, attribute: 'v8n-prefix', noAccessor: true },\n      property: { type: String, noAccessor: true },\n      label: { type: String, noAccessor: true },\n    };\n  }\n\n  private __placeholder: string | null = null;\n\n  private __helperText: string | null = null;\n\n  private __v8nPrefix: string | null = null;\n\n  private __property: string | null = null;\n\n  private __label: string | null = null;\n\n  get placeholder(): string {\n    return typeof this.__placeholder === 'string' ? this.__placeholder : this.t('placeholder');\n  }\n\n  set placeholder(newValue: string) {\n    this.__placeholder = newValue;\n  }\n\n  get helperText(): string {\n    return typeof this.__helperText === 'string' ? this.__helperText : this.t('helper_text');\n  }\n\n  set helperText(newValue: string) {\n    this.__helperText = newValue;\n  }\n\n  get v8nPrefix(): string {\n    return typeof this.__v8nPrefix === 'string' ? this.__v8nPrefix : `${this.infer}:`;\n  }\n\n  set v8nPrefix(newValue: string) {\n    this.__v8nPrefix = newValue;\n  }\n\n  get property(): string {\n    return typeof this.__property === 'string' ? this.__property : this.infer.replace(/-/g, '_');\n  }\n\n  set property(newValue: string) {\n    this.__property = newValue;\n  }\n\n  get label(): string {\n    return typeof this.__label === 'string' ? this.__label : this.t('label');\n  }\n\n  set label(newValue: string) {\n    this.__label = newValue;\n  }\n\n  protected get _value(): unknown | undefined {\n    return this.nucleon?.form[this.property];\n  }\n\n  protected set _value(newValue: unknown | undefined) {\n    const event = new CustomEvent('change', { cancelable: true, detail: newValue });\n    const useDefaultAction = this.dispatchEvent(event);\n    if (useDefaultAction) this.nucleon?.edit({ [this.property]: newValue });\n  }\n\n  protected get _error(): string | undefined {\n    return this.nucleon?.errors.find(v => v.startsWith(this.v8nPrefix));\n  }\n\n  protected get _errorMessage(): string | undefined {\n    return this._error ? this.t(this._error.substring(0, this.v8nPrefix.length)) : undefined;\n  }\n\n  protected get _checkValidity(): () => boolean {\n    return () => !this._error;\n  }\n}\n"]}
+{"version":3,"file":"InternalEditableControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableControl/InternalEditableControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport { InternalControl } from '../InternalControl/InternalControl';\n\nexport class InternalEditableControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __placeholder: { attribute: false },\n      __helperText: { attribute: false },\n      __v8nPrefix: { attribute: false },\n      __property: { attribute: false },\n      __label: { attribute: false },\n      placeholder: { type: String, noAccessor: true },\n      helperText: { type: String, attribute: 'helper-text', noAccessor: true },\n      v8nPrefix: { type: String, attribute: 'v8n-prefix', noAccessor: true },\n      property: { type: String, noAccessor: true },\n      label: { type: String, noAccessor: true },\n    };\n  }\n\n  private __placeholder: string | null = null;\n\n  private __helperText: string | null = null;\n\n  private __v8nPrefix: string | null = null;\n\n  private __property: string | null = null;\n\n  private __label: string | null = null;\n\n  get placeholder(): string {\n    return typeof this.__placeholder === 'string' ? this.__placeholder : this.t('placeholder');\n  }\n\n  set placeholder(newValue: string) {\n    this.__placeholder = newValue;\n  }\n\n  get helperText(): string {\n    return typeof this.__helperText === 'string' ? this.__helperText : this.t('helper_text');\n  }\n\n  set helperText(newValue: string) {\n    this.__helperText = newValue;\n  }\n\n  get v8nPrefix(): string {\n    return typeof this.__v8nPrefix === 'string' ? this.__v8nPrefix : `${this.infer}:`;\n  }\n\n  set v8nPrefix(newValue: string) {\n    this.__v8nPrefix = newValue;\n  }\n\n  get property(): string {\n    return typeof this.__property === 'string' ? this.__property : this.infer.replace(/-/g, '_');\n  }\n\n  set property(newValue: string) {\n    this.__property = newValue;\n  }\n\n  get label(): string {\n    return typeof this.__label === 'string' ? this.__label : this.t('label');\n  }\n\n  set label(newValue: string) {\n    this.__label = newValue;\n  }\n\n  protected get _value(): unknown | undefined {\n    return this.nucleon?.form[this.property];\n  }\n\n  protected set _value(newValue: unknown | undefined) {\n    const event = new CustomEvent('change', { cancelable: true, detail: newValue });\n    const useDefaultAction = this.dispatchEvent(event);\n    if (useDefaultAction) this.nucleon?.edit({ [this.property]: newValue });\n  }\n\n  protected get _error(): string | undefined {\n    return this.nucleon?.errors.find(v => v.startsWith(this.v8nPrefix));\n  }\n\n  protected get _errorMessage(): string | undefined {\n    return this._error ? this.t(this._error.substring(this.v8nPrefix.length)) : undefined;\n  }\n\n  protected get _checkValidity(): () => boolean {\n    return () => !this._error;\n  }\n}\n"]}

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

@@ -1,9 +1,7 @@
 import type { HALJSONResource } from '../../public/NucleonElement/types';
 import type { TemplateResult } from 'lit-html';
 import { NucleonElement } from '../../public/NucleonElement/NucleonElement';
-declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
-    defaultNS: string;
-} & {
+declare const Base: typeof NucleonElement & {
     styles: import("lit-element").CSSResultArray;
 } & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
 export declare class InternalForm<TData extends HALJSONResource> extends Base<TData> {

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

@@ -1,10 +1,9 @@
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { NucleonElement } from "../../public/NucleonElement/NucleonElement.js";
 import { classMap } from "../../../utils/class-map.js";
 import { html } from 'lit-html';
-const Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));
+const Base = ConfigurableMixin(ThemeableMixin(NucleonElement));
 export class InternalForm extends Base {
     renderBody() {
         return this.data

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

@@ -1 +1 @@
-{"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;AAElF,MAAM,OAAO,YAA4C,SAAQ,IAAW;IAC1E,UAAU;QACR,OAAO,IAAI,CAAC,IAAI;YACd,CAAC,CAAC,IAAI,CAAA;;;SAGH;YACH,CAAC,CAAC,IAAI,CAAA,8EAA8E,CAAC;IACzF,CAAC;IAED,MAAM;QACJ,MAAM,gBAAgB,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5F,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;kBAEpB,QAAQ,CAAC;YACf,wBAAwB,EAAE,IAAI;YAC9B,oBAAoB,EAAE,IAAI;YAC1B,+BAA+B,EAAE,gBAAgB;SAClD,CAAC;;YAEA,IAAI,CAAC,UAAU,EAAE;;;;kBAIX,QAAQ,CAAC;YACf,0CAA0C,EAAE,IAAI;YAChD,+BAA+B,EAAE,CAAC,gBAAgB;SACnD,CAAC;;;qBAGS,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU;;oBAE1C,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;;;KAMjD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));\n\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\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  render(): TemplateResult {\n    const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) || !this.data);\n\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'grid grid-cols-1 gap-m': true,\n            'transition-opacity': true,\n            'opacity-0 pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          ${this.renderBody()}\n        </div>\n\n        <div\n          class=${classMap({\n            'transition-opacity absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('fail') ? 'vertical' : 'no-label'}\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAE/D,MAAM,OAAO,YAA4C,SAAQ,IAAW;IAC1E,UAAU;QACR,OAAO,IAAI,CAAC,IAAI;YACd,CAAC,CAAC,IAAI,CAAA;;;SAGH;YACH,CAAC,CAAC,IAAI,CAAA,8EAA8E,CAAC;IACzF,CAAC;IAED,MAAM;QACJ,MAAM,gBAAgB,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5F,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;kBAEpB,QAAQ,CAAC;YACf,wBAAwB,EAAE,IAAI;YAC9B,oBAAoB,EAAE,IAAI;YAC1B,+BAA+B,EAAE,gBAAgB;SAClD,CAAC;;YAEA,IAAI,CAAC,UAAU,EAAE;;;;kBAIX,QAAQ,CAAC;YACf,0CAA0C,EAAE,IAAI;YAChD,+BAA+B,EAAE,CAAC,gBAAgB;SACnD,CAAC;;;qBAGS,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU;;oBAE1C,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;;;KAMjD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\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  render(): TemplateResult {\n    const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) || !this.data);\n\n    return html`\n      <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n        <div\n          class=${classMap({\n            'grid grid-cols-1 gap-m': true,\n            'transition-opacity': true,\n            'opacity-0 pointer-events-none': isSpinnerVisible,\n          })}\n        >\n          ${this.renderBody()}\n        </div>\n\n        <div\n          class=${classMap({\n            'transition-opacity absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isSpinnerVisible,\n          })}\n        >\n          <foxy-spinner\n            layout=${this.in('fail') ? 'vertical' : 'no-label'}\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : 'busy'}\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -1,6 +1,6 @@
 import '../../public/Spinner/index';
-import './internal/InternalCreateControl/index';
-import './internal/InternalDeleteControl/index';
+import '../InternalCreateControl/index';
+import '../InternalDeleteControl/index';
 import './internal/InternalTimestampsControl/index';
 import { InternalForm } from './InternalForm';
 export { InternalForm };

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

@@ -1,6 +1,6 @@
 import "../../public/Spinner/index.js";
-import "./internal/InternalCreateControl/index.js";
-import "./internal/InternalDeleteControl/index.js";
+import "../InternalCreateControl/index.js";
+import "../InternalDeleteControl/index.js";
 import "./internal/InternalTimestampsControl/index.js";
 import { InternalForm } from "./InternalForm.js";
 customElements.define('foxy-internal-form', InternalForm);

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,uCAAoC;AACpC,mDAAgD;AAChD,mDAAgD;AAChD,uDAAoD;AACpD,OAAO,EAAE,YAAY,EAAE,0BAAuB;AAE9C,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import '../../public/Spinner/index';\nimport './internal/InternalCreateControl/index';\nimport './internal/InternalDeleteControl/index';\nimport './internal/InternalTimestampsControl/index';\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,uCAAoC;AACpC,2CAAwC;AACxC,2CAAwC;AACxC,uDAAoD;AACpD,OAAO,EAAE,YAAY,EAAE,0BAAuB;AAE9C,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import '../../public/Spinner/index';\nimport '../InternalCreateControl/index';\nimport '../InternalDeleteControl/index';\nimport './internal/InternalTimestampsControl/index';\nimport { InternalForm } from './InternalForm';\n\ncustomElements.define('foxy-internal-form', InternalForm);\n\nexport { InternalForm };\n"]}

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

@@ -1,9 +1,14 @@
-import { CSSResultArray, TemplateResult } from 'lit-element';
+import type { CSSResultArray, TemplateResult } from 'lit-element';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+/**
+ * Internal control displaying a custom field for frequency input.
+ *
+ * @since 1.17.0
+ * @tag foxy-internal-frequency-control
+ */
 export declare class InternalFrequencyControl extends InternalEditableControl {
     static get styles(): CSSResultArray;
     private __i18n;
-    private __getItems;
     renderControl(): TemplateResult;
     updated(changes: Map<keyof this, unknown>): void;
 }

package/dist/elements/internal/InternalFrequencyControl/InternalFrequencyControl.js

@@ -1,7 +1,12 @@
-import { css, html } from 'lit-element';
-import memoize from 'lodash-es/memoize';
-import { parseDuration } from "../../../utils/parse-duration.js";
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { parseDuration } from "../../../utils/parse-duration.js";
+import { css, html } from 'lit-element';
+/**
+ * Internal control displaying a custom field for frequency input.
+ *
+ * @since 1.17.0
+ * @tag foxy-internal-frequency-control
+ */
 export class InternalFrequencyControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
@@ -12,15 +17,6 @@ export class InternalFrequencyControl extends InternalEditableControl {
                 return [count.toString(), units];
             },
         };
-        this.__getItems = memoize((value) => {
-            const count = parseDuration(value).count;
-            return [
-                { value: 'd', label: this.t('day', { count }) },
-                { value: 'w', label: this.t('week', { count }) },
-                { value: 'm', label: this.t('month', { count }) },
-                { value: 'y', label: this.t('year', { count }) },
-            ];
-        });
     }
     static get styles() {
         return [
@@ -61,55 +57,59 @@ vaadin-combo-box::part(text-field){
         ];
     }
     renderControl() {
-        var _a;
+        var _a, _b;
         const value = ((_a = this._value) !== null && _a !== void 0 ? _a : '');
+        const count = parseDuration(value).count;
         return html `
       <vaadin-custom-field
-        data-testid="field"
-        .i18n=${this.__i18n}
-        .label=${this.label}
-        .value=${value}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
-        .errorMessage=${this._errorMessage}
         .checkValidity=${this._checkValidity}
+        .errorMessage=${(_b = this._errorMessage) !== null && _b !== void 0 ? _b : ''}
+        .helperText=${this.helperText}
+        .label=${this.label}
+        .value=${value}
+        .i18n=${this.__i18n}
         @change=${(evt) => {
             const field = evt.currentTarget;
             this._value = field.value;
         }}
       >
         <vaadin-integer-field
-          data-testid="value"
-          min="1"
           max="999"
-          has-controls
+          min="1"
           prevent-invalid-input
-          ?invalid=${!!this._error}
+          has-controls
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
+          ?invalid=${!this._checkValidity()}
+          @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
         >
         </vaadin-integer-field>
 
         <vaadin-combo-box
-          data-testid="units"
           item-value-path="value"
           item-label-path="label"
-          .items=${this.__getItems(value)}
-          ?invalid=${!!this._error}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
+          ?invalid=${!this._checkValidity()}
+          .items=${[
+            { value: 'd', label: this.t('day', { count }) },
+            { value: 'w', label: this.t('week', { count }) },
+            { value: 'm', label: this.t('month', { count }) },
+            { value: 'y', label: this.t('year', { count }) },
+        ]}
+          @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
         >
         </vaadin-combo-box>
       </vaadin-custom-field>
     `;
     }
     updated(changes) {
-        var _a;
         super.updated(changes);
         const field = this.renderRoot.firstElementChild;
-        const value = (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.form[this.property];
-        if (field.value !== value)
-            field.value = value;
+        if (field.value !== this._value)
+            field.value = this._value;
     }
 }
 //# sourceMappingURL=InternalFrequencyControl.js.map