@foxy.io/elements 1.20.2 → 1.21.0-beta.2

package/dist/elements/internal/InternalAsyncListControl/InternalAsyncListControl.js

@@ -0,0 +1,209 @@
+import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { classMap } from "../../../utils/class-map.js";
+import { html } from 'lit-element';
+export class InternalAsyncListControl extends InternalEditableControl {
+    constructor() {
+        super(...arguments);
+        /** Same as the `related` property of `NucleonElement`. */
+        this.related = [];
+        /** Limit query parameter to apply to the `first` URL. */
+        this.limit = 20;
+        /** URI of the first page of the hAPI collection to display. */
+        this.first = '';
+        /** Same as the `form` property of `FormDialog`. If set, will open a dialog on item click. */
+        this.form = '';
+        /** Same as the `item` property of `CollectionPage`. */
+        this.item = '';
+        /** Same as the `wide` property of `FormDialog`. */
+        this.wide = false;
+        /** Same as the `alert` property of `FormDialog`. */
+        this.alert = false;
+        /** Hides Delete Swipe Action if true. */
+        this.hideDeleteButton = false;
+        /** Hides Create button if true. */
+        this.hideCreateButton = false;
+        /** If set, renders list items as <a> tags. */
+        this.getPageHref = null;
+        this.__deletionConfimationCallback = null;
+        this.__cachedCardRenderer = null;
+        this.__itemRenderer = ctx => {
+            if (!(this.form || this.getPageHref) || !ctx.data)
+                return this.__cardRenderer(ctx);
+            const isDisabled = this.disabledSelector.matches('card', true);
+            const card = this.__cardRenderer(ctx);
+            let clickableItem;
+            const wrapperClass = classMap({
+                'rounded-t': !ctx.previous,
+                'rounded-b': !ctx.next,
+                'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,
+                'text-left w-full block transition-colors': true,
+                'hover-bg-contrast-5': !isDisabled,
+            });
+            if (this.getPageHref) {
+                if (isDisabled) {
+                    clickableItem = html `<div class=${wrapperClass}>${card}</div>`;
+                }
+                else {
+                    const href = this.getPageHref(ctx.href, ctx.data);
+                    clickableItem = html `<a class=${wrapperClass} href=${href}>${card}</a>`;
+                }
+            }
+            else {
+                const handleClick = (evt) => {
+                    const button = evt.currentTarget;
+                    const dialog = this.__dialog;
+                    dialog.header = 'header_update';
+                    dialog.href = ctx.href;
+                    dialog.show(button);
+                };
+                clickableItem = html `
+        <button ?disabled=${isDisabled} class=${wrapperClass} @click=${handleClick}>${card}</button>
+      `;
+            }
+            if (this.hideDeleteButton)
+                return clickableItem;
+            return html `
+      <foxy-swipe-actions class="block">
+        ${clickableItem}
+
+        <vaadin-button
+          theme="primary error"
+          class="h-full"
+          slot="action"
+          @click=${(evt) => {
+                const button = evt.currentTarget;
+                const confirm = this.renderRoot.querySelector('#confirm');
+                confirm.show(button);
+                this.__deletionConfimationCallback = () => {
+                    const cardButton = button.previousElementSibling;
+                    const card = cardButton.querySelector('[href]');
+                    card === null || card === void 0 ? void 0 : card.delete();
+                    this.__deletionConfimationCallback = null;
+                };
+            }}
+        >
+          <foxy-i18n infer="" key="delete_button_text"></foxy-i18n>
+        </vaadin-button>
+      </foxy-swipe-actions>
+    `;
+        };
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            hideDeleteButton: { type: Boolean, attribute: 'hide-delete-button' },
+            hideCreateButton: { type: Boolean, attribute: 'hide-create-button' },
+            getPageHref: { attribute: false },
+            related: { type: Array },
+            first: { type: String },
+            limit: { type: Number },
+            form: { type: String },
+            item: { type: String },
+            wide: { type: Boolean },
+            alert: { type: Boolean },
+        };
+    }
+    renderControl() {
+        let first;
+        try {
+            const url = new URL(this.first);
+            url.searchParams.set('limit', String(this.limit));
+            first = url.toString();
+        }
+        catch (_a) {
+            first = this.first;
+        }
+        return html `
+      ${this.form
+            ? html `
+            <foxy-form-dialog
+              parent=${first}
+              infer="dialog"
+              id="form"
+              ?wide=${this.wide}
+              ?alert=${this.alert}
+              .related=${this.related}
+              .form=${this.form}
+            >
+            </foxy-form-dialog>
+
+            ${this.hideDeleteButton
+                ? ''
+                : html `
+                  <foxy-internal-confirm-dialog
+                    message="delete_message"
+                    confirm="delete_confirm"
+                    cancel="delete_cancel"
+                    header="delete_header"
+                    theme="error"
+                    lang=${this.lang}
+                    ns=${this.ns}
+                    id="confirm"
+                    @hide=${(evt) => {
+                    var _a;
+                    if (!evt.detail.cancelled)
+                        (_a = this.__deletionConfimationCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+                }}
+                  >
+                  </foxy-internal-confirm-dialog>
+                `}
+          `
+            : ''}
+      ${this.label && this.label !== 'label'
+            ? html `<div class="font-medium text-secondary text-s mb-xs">${this.label}</div>`
+            : ''}
+
+      <foxy-pagination first=${first} infer="pagination">
+        <foxy-collection-page
+          class="mb-s block divide-y divide-contrast-5 rounded overflow-hidden bg-contrast-5"
+          infer="card"
+          .related=${this.related}
+          .item=${this.__itemRenderer}
+        >
+        </foxy-collection-page>
+
+        ${!this.form || this.readonly || this.hideCreateButton
+            ? ''
+            : html `
+              <vaadin-button
+                class="mb-s w-full"
+                theme="success"
+                ?disabled=${this.disabled}
+                @click=${(evt) => {
+                evt.preventDefault();
+                evt.stopPropagation();
+                const dialog = this.__dialog;
+                const button = evt.currentTarget;
+                dialog.header = 'header_create';
+                dialog.href = '';
+                dialog.show(button);
+            }}
+              >
+                <foxy-i18n infer="" key="create_button_text"></foxy-i18n>
+              </vaadin-button>
+            `}
+      </foxy-pagination>
+    `;
+    }
+    get __dialog() {
+        return this.renderRoot.querySelector('#form');
+    }
+    get __cardRenderer() {
+        var _a;
+        const item = this.item;
+        if (((_a = this.__cachedCardRenderer) === null || _a === void 0 ? void 0 : _a.item) !== item) {
+            this.__cachedCardRenderer = {
+                item: item,
+                render: typeof item === 'string'
+                    ? new Function('ctx', `return ctx.html\`<${item} related=\${JSON.stringify(ctx.related)} parent=\${ctx.parent} style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)" infer href=\${ctx.href}></${item}>\``)
+                    : ctx => html `
+                <div style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)">
+                  ${item(ctx)}
+                </div>
+              `,
+            };
+        }
+        return this.__cachedCardRenderer.render;
+    }
+}
+//# sourceMappingURL=InternalAsyncListControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalAsyncListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CollectionPage, NucleonElement } from '../../public';\nimport type { InternalConfirmDialog } from '../InternalConfirmDialog';\nimport type { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\nimport type { FormDialog } from '../../index';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-element';\n\nexport class InternalAsyncListControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      hideDeleteButton: { type: Boolean, attribute: 'hide-delete-button' },\n      hideCreateButton: { type: Boolean, attribute: 'hide-create-button' },\n      getPageHref: { attribute: false },\n      related: { type: Array },\n      first: { type: String },\n      limit: { type: Number },\n      form: { type: String },\n      item: { type: String },\n      wide: { type: Boolean },\n      alert: { type: Boolean },\n    };\n  }\n\n  /** Same as the `related` property of `NucleonElement`. */\n  related = [] as string[];\n\n  /** Limit query parameter to apply to the `first` URL. */\n  limit = 20;\n\n  /** URI of the first page of the hAPI collection to display. */\n  first = '';\n\n  /** Same as the `form` property of `FormDialog`. If set, will open a dialog on item click. */\n  form: FormDialog['form'] = '';\n\n  /** Same as the `item` property of `CollectionPage`. */\n  item: CollectionPage<any>['item'] = '';\n\n  /** Same as the `wide` property of `FormDialog`. */\n  wide = false;\n\n  /** Same as the `alert` property of `FormDialog`. */\n  alert = false;\n\n  /** Hides Delete Swipe Action if true. */\n  hideDeleteButton = false;\n\n  /** Hides Create button if true. */\n  hideCreateButton = false;\n\n  /** If set, renders list items as <a> tags. */\n  getPageHref: ((itemHref: string, item: unknown) => string) | null = null;\n\n  private __deletionConfimationCallback: (() => void) | null = null;\n\n  private __cachedCardRenderer: {\n    item: InternalAsyncListControl['item'];\n    render: ItemRenderer;\n  } | null = null;\n\n  private __itemRenderer: ItemRenderer = ctx => {\n    if (!(this.form || this.getPageHref) || !ctx.data) return this.__cardRenderer(ctx);\n\n    const isDisabled = this.disabledSelector.matches('card', true);\n    const card = this.__cardRenderer(ctx);\n    let clickableItem: TemplateResult;\n\n    const wrapperClass = classMap({\n      'rounded-t': !ctx.previous,\n      'rounded-b': !ctx.next,\n      'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,\n      'text-left w-full block transition-colors': true,\n      'hover-bg-contrast-5': !isDisabled,\n    });\n\n    if (this.getPageHref) {\n      if (isDisabled) {\n        clickableItem = html`<div class=${wrapperClass}>${card}</div>`;\n      } else {\n        const href = this.getPageHref(ctx.href, ctx.data);\n        clickableItem = html`<a class=${wrapperClass} href=${href}>${card}</a>`;\n      }\n    } else {\n      const handleClick = (evt: Event) => {\n        const button = evt.currentTarget as HTMLButtonElement;\n        const dialog = this.__dialog;\n\n        dialog.header = 'header_update';\n        dialog.href = ctx.href;\n        dialog.show(button);\n      };\n\n      clickableItem = html`\n        <button ?disabled=${isDisabled} class=${wrapperClass} @click=${handleClick}>${card}</button>\n      `;\n    }\n\n    if (this.hideDeleteButton) return clickableItem;\n\n    return html`\n      <foxy-swipe-actions class=\"block\">\n        ${clickableItem}\n\n        <vaadin-button\n          theme=\"primary error\"\n          class=\"h-full\"\n          slot=\"action\"\n          @click=${(evt: CustomEvent) => {\n            const button = evt.currentTarget as HTMLElement;\n            const confirm = this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n\n            confirm.show(button);\n\n            this.__deletionConfimationCallback = () => {\n              const cardButton = button.previousElementSibling!;\n              const card = cardButton.querySelector<NucleonElement<any>>('[href]');\n\n              card?.delete();\n              this.__deletionConfimationCallback = null;\n            };\n          }}\n        >\n          <foxy-i18n infer=\"\" key=\"delete_button_text\"></foxy-i18n>\n        </vaadin-button>\n      </foxy-swipe-actions>\n    `;\n  };\n\n  renderControl(): TemplateResult {\n    let first: string;\n\n    try {\n      const url = new URL(this.first);\n      url.searchParams.set('limit', String(this.limit));\n      first = url.toString();\n    } catch {\n      first = this.first;\n    }\n\n    return html`\n      ${this.form\n        ? html`\n            <foxy-form-dialog\n              parent=${first}\n              infer=\"dialog\"\n              id=\"form\"\n              ?wide=${this.wide}\n              ?alert=${this.alert}\n              .related=${this.related}\n              .form=${this.form as any}\n            >\n            </foxy-form-dialog>\n\n            ${this.hideDeleteButton\n              ? ''\n              : html`\n                  <foxy-internal-confirm-dialog\n                    message=\"delete_message\"\n                    confirm=\"delete_confirm\"\n                    cancel=\"delete_cancel\"\n                    header=\"delete_header\"\n                    theme=\"error\"\n                    lang=${this.lang}\n                    ns=${this.ns}\n                    id=\"confirm\"\n                    @hide=${(evt: DialogHideEvent) => {\n                      if (!evt.detail.cancelled) this.__deletionConfimationCallback?.();\n                    }}\n                  >\n                  </foxy-internal-confirm-dialog>\n                `}\n          `\n        : ''}\n      ${this.label && this.label !== 'label'\n        ? html`<div class=\"font-medium text-secondary text-s mb-xs\">${this.label}</div>`\n        : ''}\n\n      <foxy-pagination first=${first} infer=\"pagination\">\n        <foxy-collection-page\n          class=\"mb-s block divide-y divide-contrast-5 rounded overflow-hidden bg-contrast-5\"\n          infer=\"card\"\n          .related=${this.related}\n          .item=${this.__itemRenderer as any}\n        >\n        </foxy-collection-page>\n\n        ${!this.form || this.readonly || this.hideCreateButton\n          ? ''\n          : html`\n              <vaadin-button\n                class=\"mb-s w-full\"\n                theme=\"success\"\n                ?disabled=${this.disabled}\n                @click=${(evt: Event) => {\n                  evt.preventDefault();\n                  evt.stopPropagation();\n\n                  const dialog = this.__dialog;\n                  const button = evt.currentTarget as HTMLButtonElement;\n\n                  dialog.header = 'header_create';\n                  dialog.href = '';\n                  dialog.show(button);\n                }}\n              >\n                <foxy-i18n infer=\"\" key=\"create_button_text\"></foxy-i18n>\n              </vaadin-button>\n            `}\n      </foxy-pagination>\n    `;\n  }\n\n  private get __dialog() {\n    return this.renderRoot.querySelector('#form') as FormDialog;\n  }\n\n  private get __cardRenderer() {\n    const item = this.item;\n\n    if (this.__cachedCardRenderer?.item !== item) {\n      this.__cachedCardRenderer = {\n        item: item,\n        render:\n          typeof item === 'string'\n            ? (new Function(\n                'ctx',\n                `return ctx.html\\`<${item} related=\\${JSON.stringify(ctx.related)} parent=\\${ctx.parent} style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\" infer href=\\${ctx.href}></${item}>\\``\n              ) as ItemRenderer)\n            : ctx => html`\n                <div style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\">\n                  ${item(ctx)}\n                </div>\n              `,\n      };\n    }\n\n    return this.__cachedCardRenderer.render;\n  }\n}\n"]}

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

@@ -0,0 +1,12 @@
+import '@vaadin/vaadin-button';
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import '../../public/CollectionPage/index';
+import '../../public/SwipeActions/index';
+import '../../public/FormDialog/index';
+import '../../public/Pagination/index';
+import '../../public/I18n/index';
+import '../InternalEditableControl/index';
+import '../InternalConfirmDialog/index';
+import { InternalAsyncListControl as Control } from './InternalAsyncListControl';
+export { Control as InternalAsyncListControl };

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

@@ -0,0 +1,14 @@
+import '@vaadin/vaadin-button';
+import '@polymer/iron-icons';
+import '@polymer/iron-icon';
+import "../../public/CollectionPage/index.js";
+import "../../public/SwipeActions/index.js";
+import "../../public/FormDialog/index.js";
+import "../../public/Pagination/index.js";
+import "../../public/I18n/index.js";
+import "../InternalEditableControl/index.js";
+import "../InternalConfirmDialog/index.js";
+import { InternalAsyncListControl as Control } from "./InternalAsyncListControl.js";
+customElements.define('foxy-internal-async-list-control', Control);
+export { Control as InternalAsyncListControl };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncListControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAE5B,8CAA2C;AAC3C,4CAAyC;AACzC,0CAAuC;AACvC,0CAAuC;AACvC,oCAAiC;AAEjC,6CAA0C;AAC1C,2CAAwC;AAExC,OAAO,EAAE,wBAAwB,IAAI,OAAO,EAAE,sCAAmC;AAEjF,cAAc,CAAC,MAAM,CAAC,kCAAkC,EAAE,OAAO,CAAC,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\nimport '@polymer/iron-icons';\nimport '@polymer/iron-icon';\n\nimport '../../public/CollectionPage/index';\nimport '../../public/SwipeActions/index';\nimport '../../public/FormDialog/index';\nimport '../../public/Pagination/index';\nimport '../../public/I18n/index';\n\nimport '../InternalEditableControl/index';\nimport '../InternalConfirmDialog/index';\n\nimport { InternalAsyncListControl as Control } from './InternalAsyncListControl';\n\ncustomElements.define('foxy-internal-async-list-control', Control);\n\nexport { Control as InternalAsyncListControl };\n"]}

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

@@ -17,5 +17,6 @@ export declare class InternalCard<TData extends Data> extends InternalCard_base<
      */
     renderBody(): TemplateResult;
     render(): TemplateResult;
+    get isBodyReady(): boolean;
 }
 export {};

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

@@ -17,6 +17,11 @@ export class InternalCard extends ThemeableMixin(NucleonElement) {
         return html ``;
     }
     render() {
+        const spinnerState = this.in('fail')
+            ? 'error'
+            : this.in({ idle: 'template' })
+                ? 'empty'
+                : 'busy';
         return html `
       <div
         aria-busy=${this.in('busy')}
@@ -26,7 +31,7 @@ export class InternalCard extends ThemeableMixin(NucleonElement) {
         <div
           class=${classMap({
             'transition duration-500 ease-in-out': true,
-            'opacity-0 pointer-events-none': !this.in({ idle: 'snapshot' }),
+            'opacity-0 pointer-events-none': !this.isBodyReady,
         })}
         >
           ${this.renderBody()}
@@ -35,12 +40,12 @@ export class InternalCard extends ThemeableMixin(NucleonElement) {
         <div
           class=${classMap({
             'transition duration-500 ease-in-out absolute inset-0 flex': true,
-            'opacity-0 pointer-events-none': this.in({ idle: 'snapshot' }),
+            'opacity-0 pointer-events-none': this.isBodyReady,
         })}
         >
           <foxy-spinner
-            layout=${this.in('busy') ? 'no-label' : 'horizontal'}
-            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}
+            layout=${spinnerState === 'busy' ? 'no-label' : 'horizontal'}
+            state=${spinnerState}
             class="m-auto"
             infer="spinner"
           >
@@ -49,5 +54,8 @@ export class InternalCard extends ThemeableMixin(NucleonElement) {
       </div>
     `;
     }
+    get isBodyReady() {
+        return !!this.data;
+    }
 }
 //# sourceMappingURL=InternalCard.js.map

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,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 * @element 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"]}
+{"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,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;YAClC,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;gBAC/B,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,MAAM,CAAC;QAEX,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;;;kBAKjB,QAAQ,CAAC;YACf,qCAAqC,EAAE,IAAI;YAC3C,+BAA+B,EAAE,CAAC,IAAI,CAAC,WAAW;SACnD,CAAC;;YAEA,IAAI,CAAC,UAAU,EAAE;;;;kBAIX,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,+BAA+B,EAAE,IAAI,CAAC,WAAW;SAClD,CAAC;;;qBAGS,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;oBACpD,YAAY;;;;;;;KAO3B,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACrB,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 * @element 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    const spinnerState = this.in('fail')\n      ? 'error'\n      : this.in({ idle: 'template' })\n      ? 'empty'\n      : 'busy';\n\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.isBodyReady,\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.isBodyReady,\n          })}\n        >\n          <foxy-spinner\n            layout=${spinnerState === 'busy' ? 'no-label' : 'horizontal'}\n            state=${spinnerState}\n            class=\"m-auto\"\n            infer=\"spinner\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  get isBodyReady(): boolean {\n    return !!this.data;\n  }\n}\n"]}

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

@@ -0,0 +1,17 @@
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { Option } from './types';
+import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+/**
+ * Internal control wrapper for `vaadin-checkbox-group` element.
+ *
+ * @since 1.17.0
+ * @element foxy-internal-checkbox-group-control
+ */
+export declare class InternalCheckboxGroupControl extends InternalEditableControl {
+    static get properties(): PropertyDeclarations;
+    /** List of checkboxes to render. */
+    options: Option[];
+    /** Same as the "theme" attribute/property of `vaadin-checkbox-group`. */
+    theme: string | null;
+    renderControl(): TemplateResult;
+}

package/dist/elements/internal/InternalCheckboxGroupControl/InternalCheckboxGroupControl.js

@@ -0,0 +1,57 @@
+import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
+/**
+ * Internal control wrapper for `vaadin-checkbox-group` element.
+ *
+ * @since 1.17.0
+ * @element foxy-internal-checkbox-group-control
+ */
+export class InternalCheckboxGroupControl extends InternalEditableControl {
+    constructor() {
+        super(...arguments);
+        /** List of checkboxes to render. */
+        this.options = [];
+        /** Same as the "theme" attribute/property of `vaadin-checkbox-group`. */
+        this.theme = null;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            options: { type: Array },
+            theme: { type: String },
+        };
+    }
+    renderControl() {
+        var _a;
+        return html `
+      <vaadin-checkbox-group
+        error-message=${ifDefined(this._errorMessage)}
+        helper-text=${this.helperText}
+        label=${this.label}
+        class="w-full"
+        theme=${ifDefined((_a = this.theme) !== null && _a !== void 0 ? _a : undefined)}
+        ?disabled=${this.disabled || this.readonly}
+        .checkValidity=${this._checkValidity}
+        .value=${this._value}
+      >
+        ${this.options.map(option => html `
+            <vaadin-checkbox
+              value=${option.value}
+              @change=${(evt) => {
+            const box = evt.currentTarget;
+            const field = box.closest('vaadin-checkbox-group');
+            const boxes = field.querySelectorAll('vaadin-checkbox');
+            this._value = Array.from(boxes).reduce((value, box) => {
+                return box.checked ? [...value, box.value] : value;
+            }, []);
+        }}
+            >
+              <foxy-i18n infer="" key=${option.label}></foxy-i18n>
+            </vaadin-checkbox>
+          `)}
+      </vaadin-checkbox-group>
+    `;
+    }
+}
+//# sourceMappingURL=InternalCheckboxGroupControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalCheckboxGroupControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCheckboxGroupControl/InternalCheckboxGroupControl.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,OAAO,4BAA6B,SAAQ,uBAAuB;IAAzE;;QASE,oCAAoC;QACpC,YAAO,GAAa,EAAE,CAAC;QAEvB,yEAAyE;QACzE,UAAK,GAAkB,IAAI,CAAC;IAmC9B,CAAC;IA/CC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB,CAAC;IACJ,CAAC;IAQD,aAAa;;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,KAAK;;gBAEV,SAAS,OAAC,IAAI,CAAC,KAAK,mCAAI,SAAS,CAAC;oBAC9B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;yBACzB,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAkB;;UAE9B,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;sBAEF,MAAM,CAAC,KAAK;wBACV,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,GAAG,GAAG,GAAG,CAAC,aAAgC,CAAC;YACjD,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC,uBAAuB,CAAyB,CAAC;YAC3E,MAAM,KAAK,GAAG,KAAK,CAAC,gBAAgB,CAAkB,iBAAiB,CAAC,CAAC;YAEzE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;gBACpD,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,GAAG,CAAC,KAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAC/D,CAAC,EAAE,EAAc,CAAC,CAAC;QACrB,CAAC;;wCAEyB,MAAM,CAAC,KAAK;;WAEzC,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CheckboxGroupElement } from '@vaadin/vaadin-checkbox/vaadin-checkbox-group';\nimport type { CheckboxElement } from '@vaadin/vaadin-checkbox';\nimport type { Option } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\n/**\n * Internal control wrapper for `vaadin-checkbox-group` element.\n *\n * @since 1.17.0\n * @element foxy-internal-checkbox-group-control\n */\nexport class InternalCheckboxGroupControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Array },\n      theme: { type: String },\n    };\n  }\n\n  /** List of checkboxes to render. */\n  options: Option[] = [];\n\n  /** Same as the \"theme\" attribute/property of `vaadin-checkbox-group`. */\n  theme: string | null = null;\n\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-checkbox-group\n        error-message=${ifDefined(this._errorMessage)}\n        helper-text=${this.helperText}\n        label=${this.label}\n        class=\"w-full\"\n        theme=${ifDefined(this.theme ?? undefined)}\n        ?disabled=${this.disabled || this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${this._value as string[]}\n      >\n        ${this.options.map(\n          option => html`\n            <vaadin-checkbox\n              value=${option.value}\n              @change=${(evt: CustomEvent) => {\n                const box = evt.currentTarget as CheckboxElement;\n                const field = box.closest('vaadin-checkbox-group') as CheckboxGroupElement;\n                const boxes = field.querySelectorAll<CheckboxElement>('vaadin-checkbox');\n\n                this._value = Array.from(boxes).reduce((value, box) => {\n                  return box.checked ? [...value, box.value as string] : value;\n                }, [] as string[]);\n              }}\n            >\n              <foxy-i18n infer=\"\" key=${option.label}></foxy-i18n>\n            </vaadin-checkbox>\n          `\n        )}\n      </vaadin-checkbox-group>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,6 @@
+import '@vaadin/vaadin-checkbox/vaadin-checkbox-group';
+import '@vaadin/vaadin-checkbox/vaadin-checkbox';
+import '../InternalEditableControl/index';
+import '../../public/I18n/index';
+import { InternalCheckboxGroupControl as Control } from './InternalCheckboxGroupControl';
+export { Control as InternalCheckboxGroupControl };

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

@@ -0,0 +1,8 @@
+import '@vaadin/vaadin-checkbox/vaadin-checkbox-group';
+import '@vaadin/vaadin-checkbox/vaadin-checkbox';
+import "../InternalEditableControl/index.js";
+import "../../public/I18n/index.js";
+import { InternalCheckboxGroupControl as Control } from "./InternalCheckboxGroupControl.js";
+customElements.define('foxy-internal-checkbox-group-control', Control);
+export { Control as InternalCheckboxGroupControl };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCheckboxGroupControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,+CAA+C,CAAC;AACvD,OAAO,yCAAyC,CAAC;AAEjD,6CAA0C;AAC1C,oCAAiC;AAEjC,OAAO,EAAE,4BAA4B,IAAI,OAAO,EAAE,0CAAuC;AAEzF,cAAc,CAAC,MAAM,CAAC,sCAAsC,EAAE,OAAO,CAAC,CAAC;AAEvE,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-checkbox/vaadin-checkbox-group';\nimport '@vaadin/vaadin-checkbox/vaadin-checkbox';\n\nimport '../InternalEditableControl/index';\nimport '../../public/I18n/index';\n\nimport { InternalCheckboxGroupControl as Control } from './InternalCheckboxGroupControl';\n\ncustomElements.define('foxy-internal-checkbox-group-control', Control);\n\nexport { Control as InternalCheckboxGroupControl };\n"]}

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

@@ -0,0 +1,6 @@
+export declare type Option = {
+    /** I18n label key for the checkbox. */
+    label: string;
+    /** Checkbox value. */
+    value: string;
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCheckboxGroupControl/types.ts"],"names":[],"mappings":"","sourcesContent":["export type Option = {\n  /** I18n label key for the checkbox. */\n  label: string;\n  /** Checkbox value. */\n  value: string;\n};\n"]}

package/dist/elements/internal/InternalControl/InternalControl.js

@@ -37,9 +37,10 @@ export class InternalControl extends ConfigurableMixin(TranslatableMixin(Themeab
         return super.inferFromElement(key, element);
     }
     applyInferredProperties(context) {
-        var _a;
+        var _a, _b;
         super.applyInferredProperties(context);
         this.nucleon = (_a = context.get('nucleon')) !== null && _a !== void 0 ? _a : null;
+        this.disabled = ((_b = this.nucleon) === null || _b === void 0 ? void 0 : _b.in('idle')) === false || super.disabled;
     }
     updated(changes) {
         super.updated(changes);

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

@@ -1 +1 @@
-{"version":3,"file":"InternalControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalControl/InternalControl.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,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,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;;;;;;;;;GAUG;AACH,MAAM,OAAO,eAAgB,SAAQ,iBAAiB,CACpD,iBAAiB,CAAC,cAAc,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,CAC/D;IAFD;;QAcE,wDAAwD;QACxD,YAAO,GAA+B,IAAI,CAAC;IA6C7C,CAAC;IAzDC,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,GAAG,KAAK,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;IAClD,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC9B,CAAC;IACJ,CAAC;IAKD,gBAAgB,CAAC,GAAW,EAAE,OAAoB;QAChD,IAAI,GAAG,KAAK,SAAS,IAAI,OAAO,YAAY,cAAc;YAAE,OAAO,OAAO,CAAC;QAC3E,OAAO,KAAK,CAAC,gBAAgB,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAC9C,CAAC;IAED,uBAAuB,CAAC,OAA6B;;QACnD,KAAK,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,SAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAqC,mCAAI,IAAI,CAAC;IACrF,CAAC;IAED,OAAO,CAAC,OAAiC;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YAClC,MAAM,gBAAgB,GAAG,IAAI,CAAA;sBACb,IAAI,CAAC,KAAK;sBACV,IAAI,CAAC,KAAK;OACzB,CAAC;YAEF,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;SAChC;IACH,CAAC;IAED;;;OAGG;IACH,aAAa;QACX,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAE/B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;QACzE,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC;KACnD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { html, LitElement } from 'lit-element';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { render } from 'lit-html';\n\n/**\n * An internal base class for any control in a Nucleon form. That control can be as simple as a text field bound\n * to a property or as complex as a query builder, and it infers property values from the\n * parent Nucleon/Configurable/Translatable element, saving the need to manually calculate\n * and bind properties in Lit templates. Each control renders before and after slots in the regular DOM + its\n * own layout in the shadow DOM. When hidden via `hiddencontrols` in the parent,\n * uses `display: none` to hide itself.\n *\n * @element foxy-internal-control\n * @since 1.17.0\n */\nexport class InternalControl extends ConfigurableMixin(\n  TranslatableMixin(ThemeableMixin(InferrableMixin(LitElement)))\n) {\n  static get inferredProperties(): string[] {\n    return [...super.inferredProperties, 'nucleon'];\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      nucleon: { attribute: false },\n    };\n  }\n\n  /** NucleonElement instance this control is bound to. */\n  nucleon: NucleonElement<any> | null = null;\n\n  inferFromElement(key: string, element: HTMLElement): unknown | undefined {\n    if (key === 'nucleon' && element instanceof NucleonElement) return element;\n    return super.inferFromElement(key, element);\n  }\n\n  applyInferredProperties(context: Map<string, unknown>): void {\n    super.applyInferredProperties(context);\n    this.nucleon = (context.get('nucleon') as NucleonElement<any> | undefined) ?? null;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n\n    if (typeof this.infer === 'string') {\n      const lightDomTemplate = html`\n        <slot name=\"${this.infer}:before\" slot=\"before\"></slot>\n        <slot name=\"${this.infer}:after\" slot=\"after\"></slot>\n      `;\n\n      render(lightDomTemplate, this);\n    }\n  }\n\n  /**\n   * Renders the control itself. In most cases, you will need to implement\n   * this method instead of `.render()` in your class to keep the before and after templates/slots.\n   */\n  renderControl(): TemplateResult {\n    return html``;\n  }\n\n  /**\n   * Renders the control (if visible) and the before/after templates/slots.\n   * You should probably implement `.renderControl()` method instead of this one in your class.\n   */\n  render(): TemplateResult {\n    if (this.hidden) return html``;\n\n    return html`\n      ${this.renderTemplateOrSlot('before', this.nucleon)} ${this.renderControl()}\n      ${this.renderTemplateOrSlot('after', this.nucleon)}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"InternalControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalControl/InternalControl.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,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,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;;;;;;;;;GAUG;AACH,MAAM,OAAO,eAAgB,SAAQ,iBAAiB,CACpD,iBAAiB,CAAC,cAAc,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,CAC/D;IAFD;;QAcE,wDAAwD;QACxD,YAAO,GAA+B,IAAI,CAAC;IA+C7C,CAAC;IA3DC,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,GAAG,KAAK,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;IAClD,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC9B,CAAC;IACJ,CAAC;IAKD,gBAAgB,CAAC,GAAW,EAAE,OAAoB;QAChD,IAAI,GAAG,KAAK,SAAS,IAAI,OAAO,YAAY,cAAc;YAAE,OAAO,OAAO,CAAC;QAC3E,OAAO,KAAK,CAAC,gBAAgB,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAC9C,CAAC;IAED,uBAAuB,CAAC,OAA6B;;QACnD,KAAK,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC;QAEvC,IAAI,CAAC,OAAO,SAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAqC,mCAAI,IAAI,CAAC;QACnF,IAAI,CAAC,QAAQ,GAAG,OAAA,IAAI,CAAC,OAAO,0CAAE,EAAE,CAAC,MAAM,OAAM,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC;IACvE,CAAC;IAED,OAAO,CAAC,OAAiC;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;YAClC,MAAM,gBAAgB,GAAG,IAAI,CAAA;sBACb,IAAI,CAAC,KAAK;sBACV,IAAI,CAAC,KAAK;OACzB,CAAC;YAEF,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;SAChC;IACH,CAAC;IAED;;;OAGG;IACH,aAAa;QACX,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAE/B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;QACzE,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC;KACnD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { html, LitElement } from 'lit-element';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { render } from 'lit-html';\n\n/**\n * An internal base class for any control in a Nucleon form. That control can be as simple as a text field bound\n * to a property or as complex as a query builder, and it infers property values from the\n * parent Nucleon/Configurable/Translatable element, saving the need to manually calculate\n * and bind properties in Lit templates. Each control renders before and after slots in the regular DOM + its\n * own layout in the shadow DOM. When hidden via `hiddencontrols` in the parent,\n * uses `display: none` to hide itself.\n *\n * @element foxy-internal-control\n * @since 1.17.0\n */\nexport class InternalControl extends ConfigurableMixin(\n  TranslatableMixin(ThemeableMixin(InferrableMixin(LitElement)))\n) {\n  static get inferredProperties(): string[] {\n    return [...super.inferredProperties, 'nucleon'];\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      nucleon: { attribute: false },\n    };\n  }\n\n  /** NucleonElement instance this control is bound to. */\n  nucleon: NucleonElement<any> | null = null;\n\n  inferFromElement(key: string, element: HTMLElement): unknown | undefined {\n    if (key === 'nucleon' && element instanceof NucleonElement) return element;\n    return super.inferFromElement(key, element);\n  }\n\n  applyInferredProperties(context: Map<string, unknown>): void {\n    super.applyInferredProperties(context);\n\n    this.nucleon = (context.get('nucleon') as NucleonElement<any> | undefined) ?? null;\n    this.disabled = this.nucleon?.in('idle') === false || super.disabled;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n\n    if (typeof this.infer === 'string') {\n      const lightDomTemplate = html`\n        <slot name=\"${this.infer}:before\" slot=\"before\"></slot>\n        <slot name=\"${this.infer}:after\" slot=\"after\"></slot>\n      `;\n\n      render(lightDomTemplate, this);\n    }\n  }\n\n  /**\n   * Renders the control itself. In most cases, you will need to implement\n   * this method instead of `.render()` in your class to keep the before and after templates/slots.\n   */\n  renderControl(): TemplateResult {\n    return html``;\n  }\n\n  /**\n   * Renders the control (if visible) and the before/after templates/slots.\n   * You should probably implement `.renderControl()` method instead of this one in your class.\n   */\n  render(): TemplateResult {\n    if (this.hidden) return html``;\n\n    return html`\n      ${this.renderTemplateOrSlot('before', this.nucleon)} ${this.renderControl()}\n      ${this.renderTemplateOrSlot('after', this.nucleon)}\n    `;\n  }\n}\n"]}

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

@@ -11,7 +11,7 @@ export class InternalDeleteControl extends InternalControl {
     constructor() {
         super(...arguments);
         /** Same as the "theme" attribute of the `vaadin-button` element. */
-        this.theme = 'primary error';
+        this.theme = 'error';
     }
     static get properties() {
         return {

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

@@ -1 +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;;;;;;GAMG;AACH,MAAM,OAAO,qBAAsB,SAAQ,eAAe;IAA1D;;QAQE,oEAAoE;QACpE,UAAK,GAAG,eAAe,CAAC;IA8B1B,CAAC;IAtCC,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;;;;;;;;;gBASC,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;;;;KAIJ,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\n/**\n * Internal control displaying a \"Delete\" button that triggers resource\n * deletion in Nucleon on click.\n *\n * @since 1.17.0\n * @element foxy-internal-delete-control\n */\nexport class InternalDeleteControl 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 error';\n\n  renderControl(): TemplateResult {\n    return html`\n      <foxy-internal-confirm-dialog\n        message=\"delete_prompt\"\n        confirm=\"delete\"\n        cancel=\"cancel\"\n        header=\"delete\"\n        theme=\"primary error\"\n        infer=\"\"\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 infer=\"\" key=\"delete\"></foxy-i18n>\n      </vaadin-button>\n    `;\n  }\n}\n"]}
+{"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;;;;;;GAMG;AACH,MAAM,OAAO,qBAAsB,SAAQ,eAAe;IAA1D;;QAQE,oEAAoE;QACpE,UAAK,GAAG,OAAO,CAAC;IA8BlB,CAAC;IAtCC,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;;;;;;;;;gBASC,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;;;;KAIJ,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\n/**\n * Internal control displaying a \"Delete\" button that triggers resource\n * deletion in Nucleon on click.\n *\n * @since 1.17.0\n * @element foxy-internal-delete-control\n */\nexport class InternalDeleteControl 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 = 'error';\n\n  renderControl(): TemplateResult {\n    return html`\n      <foxy-internal-confirm-dialog\n        message=\"delete_prompt\"\n        confirm=\"delete\"\n        cancel=\"cancel\"\n        header=\"delete\"\n        theme=\"primary error\"\n        infer=\"\"\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 infer=\"\" key=\"delete\"></foxy-i18n>\n      </vaadin-button>\n    `;\n  }\n}\n"]}

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

@@ -27,7 +27,7 @@ export class InternalDetails extends ThemeableMixin(InferrableMixin(LitElement))
         var _a;
         return html `
       <details
-        class="w-full border border-contrast-10 rounded-t-l rounded-b-l"
+        class="w-full border border-contrast-10 rounded"
         ?open=${this.open}
         @toggle=${(evt) => {
             this.open = evt.currentTarget.open;
@@ -37,8 +37,8 @@ export class InternalDetails extends ThemeableMixin(InferrableMixin(LitElement))
           class=${classMap({
             'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,
             'transition-colors cursor-pointer hover-bg-contrast-5': true,
-            'rounded-t-l': true,
-            'rounded-b-l': !this.open,
+            'rounded-t': true,
+            'rounded-b': !this.open,
         })}
         >
           <div class="flex items-center h-m pl-m pr-s">

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

@@ -1 +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 * @element 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"]}
+{"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,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,CAAC,IAAI,CAAC,IAAI;SACxB,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 * @element 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\"\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': true,\n            'rounded-b': !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/InternalEditableControl/InternalEditableControl.d.ts

@@ -11,6 +11,8 @@ import { InternalControl } from '../InternalControl/InternalControl';
  */
 export declare class InternalEditableControl extends InternalControl {
     static get properties(): PropertyDeclarations;
+    getValue: () => unknown;
+    setValue: (newValue: unknown) => void;
     private __placeholder;
     private __helperText;
     private __v8nPrefix;
@@ -60,6 +62,7 @@ export declare class InternalEditableControl extends InternalControl {
     resetProperty(): void;
     /** Restores the default label translation. */
     resetLabel(): void;
+    reportValidity(): void;
     /**
      * A shortcut to get the inferred value from the NucleonElement instance
      * up the DOM tree. If no such value or instance exists, returns `undefined`.