@foxy.io/elements 1.17.0 → 1.18.0-beta.10

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

@@ -1 +1 @@
-{"version":3,"file":"InternalAsyncDetailsControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncDetailsControl/InternalAsyncDetailsControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CollectionPage } from '../../public';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\nimport type { FormDialog } from '../../index';\n\nimport { InternalControl } from '../InternalControl/InternalControl';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a collapsible card with\n * optionally editable hAPI collection items.\n *\n * @element foxy-internal-async-details-control\n * @since 1.17.0\n */\nexport class InternalAsyncDetailsControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      related: { type: Array },\n      first: { type: String },\n      limit: { type: Number },\n      form: { type: String },\n      item: { type: String },\n      open: { 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 `open` property of `InternalDetails`. */\n  open = false;\n\n  private __cachedCardRenderer: {\n    item: InternalAsyncDetailsControl['item'];\n    render: ItemRenderer;\n  } | null = null;\n\n  private __itemRenderer: ItemRenderer = ctx => {\n    if (!this.form || !ctx.data) return this.__cardRenderer(ctx);\n\n    const isDisabled = this.disabledSelector.matches('card', true);\n\n    return html`\n      <button\n        ?disabled=${isDisabled}\n        class=${classMap({\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        @click=${(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        ${this.__cardRenderer(ctx)}\n      </button>\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      <foxy-internal-details\n        summary=\"title\"\n        infer=\"\"\n        ?open=${this.open}\n        @toggle=${(evt: Event) =>\n          (this.open = (evt.currentTarget as InternalAsyncDetailsControl).open)}\n      >\n        ${this.form\n          ? html`\n              <foxy-form-dialog\n                parent=${first}\n                infer=\"dialog\"\n                id=\"form\"\n                .related=${this.related}\n                .form=${this.form as any}\n              >\n              </foxy-form-dialog>\n\n              ${this.readonly\n                ? ''\n                : html`\n                    <button\n                      class=\"h-xs w-xs rounded-full text-success flex items-center justify-center text-l focus-outline-none focus-ring-2 focus-ring-primary-50\"\n                      slot=\"actions\"\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                      <iron-icon class=\"icon-inline\" icon=\"icons:add\"></iron-icon>\n                    </button>\n                  `}\n            `\n          : ''}\n\n        <foxy-pagination class=\"px-m pb-s\" first=${first} infer=\"pagination\">\n          <foxy-collection-page\n            class=\"-mx-m block divide-y divide-contrast-10 mb-s\"\n            infer=\"card\"\n            .related=${this.related}\n            .item=${this.__itemRenderer as any}\n          >\n          </foxy-collection-page>\n        </foxy-pagination>\n      </foxy-internal-details>\n    `;\n  }\n\n  private get __dialog() {\n    return this.renderRoot.querySelector('#form') as FormDialog;\n  }\n\n  private get __cardRenderer() {\n    if (this.__cachedCardRenderer?.item !== this.item) {\n      this.__cachedCardRenderer = {\n        item: this.item,\n        render: new Function(\n          'ctx',\n          `return ctx.html\\`<${this.item} related=\\${JSON.stringify(ctx.related)} parent=\\${ctx.parent} class=\"p-m\" infer href=\\${ctx.href}></${this.item}>\\``\n        ) as ItemRenderer,\n      };\n    }\n\n    return this.__cachedCardRenderer.render;\n  }\n}\n"]}
+{"version":3,"file":"InternalAsyncDetailsControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncDetailsControl/InternalAsyncDetailsControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CollectionPage } from '../../public';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\nimport type { FormDialog } from '../../index';\n\nimport { InternalControl } from '../InternalControl/InternalControl';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a collapsible card with\n * optionally editable hAPI collection items.\n *\n * @element foxy-internal-async-details-control\n * @since 1.17.0\n */\nexport class InternalAsyncDetailsControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      related: { type: Array },\n      first: { type: String },\n      limit: { type: Number },\n      form: { type: String },\n      item: { type: String },\n      open: { 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 `open` property of `InternalDetails`. */\n  open = false;\n\n  private __cachedCardRenderer: {\n    item: InternalAsyncDetailsControl['item'];\n    render: ItemRenderer;\n  } | null = null;\n\n  private __itemRenderer: ItemRenderer = ctx => {\n    if (!this.form || !ctx.data) return this.__cardRenderer(ctx);\n\n    const isDisabled = this.disabledSelector.matches('card', true);\n\n    return html`\n      <button\n        ?disabled=${isDisabled}\n        class=${classMap({\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        @click=${(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        ${this.__cardRenderer(ctx)}\n      </button>\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      <foxy-internal-details\n        summary=\"title\"\n        infer=\"\"\n        ?open=${this.open}\n        @toggle=${(evt: Event) =>\n          (this.open = (evt.currentTarget as InternalAsyncDetailsControl).open)}\n      >\n        ${this.form\n          ? html`\n              <foxy-form-dialog\n                parent=${first}\n                infer=\"dialog\"\n                id=\"form\"\n                .related=${this.related}\n                .form=${this.form as any}\n              >\n              </foxy-form-dialog>\n\n              ${this.readonly\n                ? ''\n                : html`\n                    <button\n                      class=\"h-xs w-xs rounded-full text-success flex items-center justify-center text-l focus-outline-none focus-ring-2 focus-ring-primary-50\"\n                      slot=\"actions\"\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                      <iron-icon class=\"icon-inline\" icon=\"icons:add\"></iron-icon>\n                    </button>\n                  `}\n            `\n          : ''}\n\n        <foxy-pagination class=\"px-m pb-s\" first=${first} infer=\"pagination\">\n          <foxy-collection-page\n            class=\"-mx-m block divide-y divide-contrast-10 mb-s\"\n            infer=\"card\"\n            .related=${this.related}\n            .item=${this.__itemRenderer as any}\n          >\n          </foxy-collection-page>\n        </foxy-pagination>\n      </foxy-internal-details>\n    `;\n  }\n\n  private get __dialog() {\n    return this.renderRoot.querySelector('#form') as FormDialog;\n  }\n\n  private get __cardRenderer() {\n    if (this.__cachedCardRenderer?.item !== this.item) {\n      this.__cachedCardRenderer = {\n        item: this.item,\n        render:\n          typeof this.item === 'string'\n            ? (new Function(\n                'ctx',\n                `return ctx.html\\`<${this.item} related=\\${JSON.stringify(ctx.related)} parent=\\${ctx.parent} class=\"p-m\" infer href=\\${ctx.href}></${this.item}>\\``\n              ) as ItemRenderer)\n            : this.item,\n      };\n    }\n\n    return this.__cachedCardRenderer.render;\n  }\n}\n"]}

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

@@ -0,0 +1,23 @@
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { CollectionPage } from '../../public';
+import type { FormDialog } from '../../index';
+import { InternalControl } from '../InternalControl/InternalControl';
+export declare class InternalAsyncListControl extends InternalControl {
+    static get properties(): PropertyDeclarations;
+    /** Same as the `related` property of `NucleonElement`. */
+    related: string[];
+    /** Limit query parameter to apply to the `first` URL. */
+    limit: number;
+    /** URI of the first page of the hAPI collection to display. */
+    first: string;
+    /** Same as the `form` property of `FormDialog`. If set, will open a dialog on item click. */
+    form: FormDialog['form'];
+    /** Same as the `item` property of `CollectionPage`. */
+    item: CollectionPage<any>['item'];
+    private __deletionConfimationCallback;
+    private __cachedCardRenderer;
+    private __itemRenderer;
+    renderControl(): TemplateResult;
+    private get __dialog();
+    private get __cardRenderer();
+}

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

@@ -0,0 +1,167 @@
+import { InternalControl } from "../InternalControl/InternalControl.js";
+import { classMap } from "../../../utils/class-map.js";
+import { html } from 'lit-element';
+export class InternalAsyncListControl extends InternalControl {
+    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 = '';
+        this.__deletionConfimationCallback = null;
+        this.__cachedCardRenderer = null;
+        this.__itemRenderer = ctx => {
+            if (!this.form || !ctx.data)
+                return this.__cardRenderer(ctx);
+            const isDisabled = this.disabledSelector.matches('card', true);
+            return html `
+      <foxy-swipe-actions class="block">
+        <button
+          ?disabled=${isDisabled}
+          class=${classMap({
+                'rounded-t-l': !ctx.previous,
+                'rounded-b-l': !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,
+            })}
+          @click=${(evt) => {
+                const button = evt.currentTarget;
+                const dialog = this.__dialog;
+                dialog.header = 'header_update';
+                dialog.href = ctx.href;
+                dialog.show(button);
+            }}
+        >
+          ${this.__cardRenderer(ctx)}
+        </button>
+
+        <vaadin-button
+          theme="primary error"
+          class="h-full rounded-t-l rounded-b-l"
+          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,
+            related: { type: Array },
+            first: { type: String },
+            limit: { type: Number },
+            form: { type: String },
+            item: { type: String },
+        };
+    }
+    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"
+              .related=${this.related}
+              .form=${this.form}
+            >
+            </foxy-form-dialog>
+
+            <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>
+          `
+            : ''}
+
+      <foxy-pagination first=${first} infer="pagination">
+        <foxy-collection-page
+          class="block divide-y divide-contrast-5 rounded-t-l rounded-b-l overflow-hidden bg-contrast-5"
+          infer="card"
+          .related=${this.related}
+          .item=${this.__itemRenderer}
+        >
+        </foxy-collection-page>
+
+        ${!this.form || this.readonly
+            ? ''
+            : html `
+              <vaadin-button
+                class="my-s bg-success-10 w-full rounded-t-l rounded-b-l"
+                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>
+                <iron-icon class="icon-inline" icon="icons:add"></iron-icon>
+              </vaadin-button>
+            `}
+      </foxy-pagination>
+    `;
+    }
+    get __dialog() {
+        return this.renderRoot.querySelector('#form');
+    }
+    get __cardRenderer() {
+        var _a;
+        if (((_a = this.__cachedCardRenderer) === null || _a === void 0 ? void 0 : _a.item) !== this.item) {
+            this.__cachedCardRenderer = {
+                item: this.item,
+                render: typeof this.item === 'string'
+                    ? new Function('ctx', `return ctx.html\`<${this.item} related=\${JSON.stringify(ctx.related)} parent=\${ctx.parent} class="p-m" infer href=\${ctx.href}></${this.item}>\``)
+                    : this.item,
+            };
+        }
+        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 { InternalControl } from '../InternalControl/InternalControl';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-element';\n\nexport class InternalAsyncListControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      related: { type: Array },\n      first: { type: String },\n      limit: { type: Number },\n      form: { type: String },\n      item: { type: String },\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  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 || !ctx.data) return this.__cardRenderer(ctx);\n\n    const isDisabled = this.disabledSelector.matches('card', true);\n\n    return html`\n      <foxy-swipe-actions class=\"block\">\n        <button\n          ?disabled=${isDisabled}\n          class=${classMap({\n            'rounded-t-l': !ctx.previous,\n            'rounded-b-l': !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          @click=${(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          ${this.__cardRenderer(ctx)}\n        </button>\n\n        <vaadin-button\n          theme=\"primary error\"\n          class=\"h-full rounded-t-l rounded-b-l\"\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              .related=${this.related}\n              .form=${this.form as any}\n            >\n            </foxy-form-dialog>\n\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      <foxy-pagination first=${first} infer=\"pagination\">\n        <foxy-collection-page\n          class=\"block divide-y divide-contrast-5 rounded-t-l rounded-b-l 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\n          ? ''\n          : html`\n              <vaadin-button\n                class=\"my-s bg-success-10 w-full rounded-t-l rounded-b-l\"\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                <iron-icon class=\"icon-inline\" icon=\"icons:add\"></iron-icon>\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    if (this.__cachedCardRenderer?.item !== this.item) {\n      this.__cachedCardRenderer = {\n        item: this.item,\n        render:\n          typeof this.item === 'string'\n            ? (new Function(\n                'ctx',\n                `return ctx.html\\`<${this.item} related=\\${JSON.stringify(ctx.related)} parent=\\${ctx.parent} class=\"p-m\" infer href=\\${ctx.href}></${this.item}>\\``\n              ) as ItemRenderer)\n            : this.item,\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 '../InternalConfirmDialog/index';
+import '../InternalControl/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 "../InternalConfirmDialog/index.js";
+import "../InternalControl/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,2CAAwC;AACxC,qCAAkC;AAElC,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 '../InternalConfirmDialog/index';\nimport '../InternalControl/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/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 = ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.in('idle')) === false || super.disabled;
+        this.nucleon = (_b = context.get('nucleon')) !== null && _b !== void 0 ? _b : null;
     }
     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,QAAQ,GAAG,OAAA,IAAI,CAAC,OAAO,0CAAE,EAAE,CAAC,MAAM,OAAM,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC;QACrE,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\n    this.disabled = this.nucleon?.in('idle') === false || super.disabled;\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"]}

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;

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

@@ -11,6 +11,8 @@ import { InternalControl } from "../InternalControl/InternalControl.js";
 export class InternalEditableControl extends InternalControl {
     constructor() {
         super(...arguments);
+        this.getValue = () => { var _a; return (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.form[this.property]; };
+        this.setValue = (newValue) => { var _a; return (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.edit({ [this.property]: newValue }); };
         this.__placeholder = null;
         this.__helperText = null;
         this.__v8nPrefix = null;
@@ -23,6 +25,8 @@ export class InternalEditableControl extends InternalControl {
             placeholder: { type: String, noAccessor: true },
             helperText: { type: String, attribute: 'helper-text', noAccessor: true },
             v8nPrefix: { type: String, attribute: 'v8n-prefix', noAccessor: true },
+            getValue: { attribute: false },
+            setValue: { attribute: false },
             property: { type: String, noAccessor: true },
             label: { type: String, noAccessor: true },
         };
@@ -126,15 +130,13 @@ export class InternalEditableControl extends InternalControl {
      * with the new value in the detail and write changes to the NucleonElement instance if permitted.
      */
     get _value() {
-        var _a;
-        return (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.form[this.property];
+        return this.getValue();
     }
     set _value(newValue) {
-        var _a;
         const event = new CustomEvent('change', { cancelable: true, detail: newValue });
         const useDefaultAction = this.dispatchEvent(event);
         if (useDefaultAction)
-            (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.edit({ [this.property]: newValue });
+            this.setValue(newValue);
     }
     /** A shortcut returning the first v8n error associated with this control. */
     get _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\n/**\n * An internal base class for controls that have editing functionality, e.g. a text field.\n * Instances of this class will provide shortcuts for translatable placeholder, label, helper\n * text and more. Unlike a regular control, editable control can not only read from a NucleonElement\n * instance up the DOM tree, but also send changes to it and trigger validation process.\n *\n * @element foxy-internal-editable-control\n * @since 1.17.0\n */\nexport class InternalEditableControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\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  /**\n   * Translated placeholder text for this control. You can set your own placeholder text\n   * if the default key in the inferred namespace doesn't work for you. Use `.resetPlaceholder()`\n   * to restore the default translation.\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.requestUpdate('placeholder', this.__placeholder);\n    this.__placeholder = newValue;\n  }\n\n  /**\n   * Translated helper text for this control. You can set your own helper text\n   * if the default key in the inferred namespace doesn't work for you. Use `.resetHelperText()`\n   * to restore the default translation.\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.requestUpdate('helperText', this.__helperText);\n    this.__helperText = newValue;\n  }\n\n  /**\n   * A prefix for all v8n errors related to this control. You can set your own v8n prefix\n   * if the default one doesn't work for you. Use `.resetV8nPrefix()`\n   * to restore the default v8n prefix.\n   */\n  get v8nPrefix(): string {\n    if (typeof this.__v8nPrefix === 'string') return this.__v8nPrefix;\n    if (typeof this.infer === 'string') return `${this.infer}:`;\n    return '';\n  }\n\n  set v8nPrefix(newValue: string) {\n    this.requestUpdate('v8nPrefix', this.__v8nPrefix);\n    this.__v8nPrefix = newValue;\n  }\n\n  /**\n   * Name of the property to bind to inferred from the control name by converting it to snake_case.\n   * You can set your own property name if the default inference method produces an incorrect result.\n   * Use `.resetProperty()` to restore the default property name.\n   */\n  get property(): string {\n    if (typeof this.__property === 'string') return this.__property;\n    if (typeof this.infer === 'string') return this.infer.replace(/-/g, '_');\n    return '';\n  }\n\n  set property(newValue: string) {\n    this.requestUpdate('property', this.__property);\n    this.__property = newValue;\n  }\n\n  /**\n   * Translated label for this control. You can set your own label if the default key in the inferred\n   * namespace doesn't work for you. Use `.resetLabel()` to restore the default translation.\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.requestUpdate('label', this.__label);\n    this.__label = newValue;\n  }\n\n  /** Restores the default placeholder translation. */\n  resetPlaceholder(): void {\n    this.requestUpdate('placeholder', this.__placeholder);\n    this.__placeholder = null;\n  }\n\n  /** Restores the default helper text translation. */\n  resetHelperText(): void {\n    this.requestUpdate('helperText', this.__helperText);\n    this.__helperText = null;\n  }\n\n  /** Restores the default v8n prefix for errors. */\n  resetV8nPrefix(): void {\n    this.requestUpdate('v8nPrefix', this.__v8nPrefix);\n    this.__v8nPrefix = null;\n  }\n\n  /** Restores the default property name. */\n  resetProperty(): void {\n    this.requestUpdate('property', this.__property);\n    this.__property = null;\n  }\n\n  /** Restores the default label translation. */\n  resetLabel(): void {\n    this.requestUpdate('label', this.__label);\n    this.__label = null;\n  }\n\n  /**\n   * A shortcut to get the inferred value from the NucleonElement instance\n   * up the DOM tree. If no such value or instance exists, returns `undefined`.\n   * Assigning a value to this property will dispatch a cancelable `change` event\n   * with the new value in the detail and write changes to the NucleonElement instance if permitted.\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  /** A shortcut returning the first v8n error associated with this control. */\n\n  protected get _error(): string | undefined {\n    return this.nucleon?.errors.find(v => v.startsWith(this.v8nPrefix));\n  }\n  /** A shortcut returning the localized text of the first v8n error associated with this control. */\n\n  protected get _errorMessage(): string | undefined {\n    return this._error ? this.t(this._error.substring(this.v8nPrefix.length)) : undefined;\n  }\n  /** A helper returning a `.checkValidity()` function for use with Vaadin elements. */\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\n/**\n * An internal base class for controls that have editing functionality, e.g. a text field.\n * Instances of this class will provide shortcuts for translatable placeholder, label, helper\n * text and more. Unlike a regular control, editable control can not only read from a NucleonElement\n * instance up the DOM tree, but also send changes to it and trigger validation process.\n *\n * @element foxy-internal-editable-control\n * @since 1.17.0\n */\nexport class InternalEditableControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\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      getValue: { attribute: false },\n      setValue: { attribute: false },\n      property: { type: String, noAccessor: true },\n      label: { type: String, noAccessor: true },\n    };\n  }\n\n  getValue = (): unknown => this.nucleon?.form[this.property];\n\n  setValue = (newValue: unknown): void => this.nucleon?.edit({ [this.property]: newValue });\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  /**\n   * Translated placeholder text for this control. You can set your own placeholder text\n   * if the default key in the inferred namespace doesn't work for you. Use `.resetPlaceholder()`\n   * to restore the default translation.\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.requestUpdate('placeholder', this.__placeholder);\n    this.__placeholder = newValue;\n  }\n\n  /**\n   * Translated helper text for this control. You can set your own helper text\n   * if the default key in the inferred namespace doesn't work for you. Use `.resetHelperText()`\n   * to restore the default translation.\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.requestUpdate('helperText', this.__helperText);\n    this.__helperText = newValue;\n  }\n\n  /**\n   * A prefix for all v8n errors related to this control. You can set your own v8n prefix\n   * if the default one doesn't work for you. Use `.resetV8nPrefix()`\n   * to restore the default v8n prefix.\n   */\n  get v8nPrefix(): string {\n    if (typeof this.__v8nPrefix === 'string') return this.__v8nPrefix;\n    if (typeof this.infer === 'string') return `${this.infer}:`;\n    return '';\n  }\n\n  set v8nPrefix(newValue: string) {\n    this.requestUpdate('v8nPrefix', this.__v8nPrefix);\n    this.__v8nPrefix = newValue;\n  }\n\n  /**\n   * Name of the property to bind to inferred from the control name by converting it to snake_case.\n   * You can set your own property name if the default inference method produces an incorrect result.\n   * Use `.resetProperty()` to restore the default property name.\n   */\n  get property(): string {\n    if (typeof this.__property === 'string') return this.__property;\n    if (typeof this.infer === 'string') return this.infer.replace(/-/g, '_');\n    return '';\n  }\n\n  set property(newValue: string) {\n    this.requestUpdate('property', this.__property);\n    this.__property = newValue;\n  }\n\n  /**\n   * Translated label for this control. You can set your own label if the default key in the inferred\n   * namespace doesn't work for you. Use `.resetLabel()` to restore the default translation.\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.requestUpdate('label', this.__label);\n    this.__label = newValue;\n  }\n\n  /** Restores the default placeholder translation. */\n  resetPlaceholder(): void {\n    this.requestUpdate('placeholder', this.__placeholder);\n    this.__placeholder = null;\n  }\n\n  /** Restores the default helper text translation. */\n  resetHelperText(): void {\n    this.requestUpdate('helperText', this.__helperText);\n    this.__helperText = null;\n  }\n\n  /** Restores the default v8n prefix for errors. */\n  resetV8nPrefix(): void {\n    this.requestUpdate('v8nPrefix', this.__v8nPrefix);\n    this.__v8nPrefix = null;\n  }\n\n  /** Restores the default property name. */\n  resetProperty(): void {\n    this.requestUpdate('property', this.__property);\n    this.__property = null;\n  }\n\n  /** Restores the default label translation. */\n  resetLabel(): void {\n    this.requestUpdate('label', this.__label);\n    this.__label = null;\n  }\n\n  /**\n   * A shortcut to get the inferred value from the NucleonElement instance\n   * up the DOM tree. If no such value or instance exists, returns `undefined`.\n   * Assigning a value to this property will dispatch a cancelable `change` event\n   * with the new value in the detail and write changes to the NucleonElement instance if permitted.\n   */\n\n  protected get _value(): unknown | undefined {\n    return this.getValue();\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.setValue(newValue);\n  }\n  /** A shortcut returning the first v8n error associated with this control. */\n\n  protected get _error(): string | undefined {\n    return this.nucleon?.errors.find(v => v.startsWith(this.v8nPrefix));\n  }\n  /** A shortcut returning the localized text of the first v8n error associated with this control. */\n\n  protected get _errorMessage(): string | undefined {\n    return this._error ? this.t(this._error.substring(this.v8nPrefix.length)) : undefined;\n  }\n  /** A helper returning a `.checkValidity()` function for use with Vaadin elements. */\n\n  protected get _checkValidity(): () => boolean {\n    return () => !this._error;\n  }\n}\n"]}

package/dist/elements/internal/InternalIntegerControl/InternalIntegerControl.js

@@ -20,7 +20,7 @@ export class InternalIntegerControl extends InternalEditableControl {
         ?readonly=${this.readonly}
         .checkValidity=${this._checkValidity}
         .value=${String(this._value)}
-        has-controls
+        clear-button-visible
         @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
         @change=${(evt) => {
             const field = evt.currentTarget;

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

@@ -1 +1 @@
-{"version":3,"file":"InternalIntegerControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalIntegerControl/InternalIntegerControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IACjE,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,WAAW;sBAChB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,KAAK;;oBAEN,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;;mBAEjB,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;kBACtE,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAoC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,CAAC,CAAC;IACnD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;CACF","sourcesContent":["import type { IntegerFieldElement } from '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport type { TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a basic integer box.\n *\n * @since 1.17.0\n * @element foxy-internal-integer-control\n */\nexport class InternalIntegerControl extends InternalEditableControl {\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-integer-field\n        error-message=${ifDefined(this._errorMessage)}\n        placeholder=${this.placeholder}\n        helper-text=${this.helperText}\n        label=${this.label}\n        class=\"w-full\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${String(this._value)}\n        has-controls\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as IntegerFieldElement;\n          this._value = parseInt(field.value);\n        }}\n      >\n      </vaadin-integer-field>\n    `;\n  }\n\n  protected get _value(): number {\n    return (super._value as number | undefined) ?? 0;\n  }\n\n  protected set _value(newValue: number) {\n    super._value = newValue as unknown | undefined;\n  }\n}\n"]}
+{"version":3,"file":"InternalIntegerControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalIntegerControl/InternalIntegerControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IACjE,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,WAAW;sBAChB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,KAAK;;oBAEN,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;;mBAEjB,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;kBACtE,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAoC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,CAAC,CAAC;IACnD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;CACF","sourcesContent":["import type { IntegerFieldElement } from '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport type { TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a basic integer box.\n *\n * @since 1.17.0\n * @element foxy-internal-integer-control\n */\nexport class InternalIntegerControl extends InternalEditableControl {\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-integer-field\n        error-message=${ifDefined(this._errorMessage)}\n        placeholder=${this.placeholder}\n        helper-text=${this.helperText}\n        label=${this.label}\n        class=\"w-full\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${String(this._value)}\n        clear-button-visible\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as IntegerFieldElement;\n          this._value = parseInt(field.value);\n        }}\n      >\n      </vaadin-integer-field>\n    `;\n  }\n\n  protected get _value(): number {\n    return (super._value as number | undefined) ?? 0;\n  }\n\n  protected set _value(newValue: number) {\n    super._value = newValue as unknown | undefined;\n  }\n}\n"]}

package/dist/elements/internal/InternalNumberControl/InternalNumberControl.js

@@ -20,7 +20,7 @@ export class InternalNumberControl extends InternalEditableControl {
         ?readonly=${this.readonly}
         .checkValidity=${this._checkValidity}
         .value=${String(this._value)}
-        has-controls
+        clear-button-visible
         @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
         @change=${(evt) => {
             const field = evt.currentTarget;

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

@@ -1 +1 @@
-{"version":3,"file":"InternalNumberControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalNumberControl/InternalNumberControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,uBAAuB;IAChE,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,WAAW;sBAChB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,KAAK;;oBAEN,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;;mBAEjB,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;kBACtE,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAmC,CAAC;YACtD,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACxC,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,CAAC,CAAC;IACnD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;CACF","sourcesContent":["import type { NumberFieldElement } from '@vaadin/vaadin-text-field/vaadin-number-field';\nimport type { TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a basic number box.\n *\n * @since 1.17.0\n * @element foxy-internal-number-control\n */\nexport class InternalNumberControl extends InternalEditableControl {\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-number-field\n        error-message=${ifDefined(this._errorMessage)}\n        placeholder=${this.placeholder}\n        helper-text=${this.helperText}\n        label=${this.label}\n        class=\"w-full\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${String(this._value)}\n        has-controls\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as NumberFieldElement;\n          this._value = parseFloat(field.value);\n        }}\n      >\n      </vaadin-number-field>\n    `;\n  }\n\n  protected get _value(): number {\n    return (super._value as number | undefined) ?? 0;\n  }\n\n  protected set _value(newValue: number) {\n    super._value = newValue as unknown | undefined;\n  }\n}\n"]}
+{"version":3,"file":"InternalNumberControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalNumberControl/InternalNumberControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,uBAAuB;IAChE,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,WAAW;sBAChB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,KAAK;;oBAEN,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;;mBAEjB,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;kBACtE,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAmC,CAAC;YACtD,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACxC,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,CAAC,CAAC;IACnD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;CACF","sourcesContent":["import type { NumberFieldElement } from '@vaadin/vaadin-text-field/vaadin-number-field';\nimport type { TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\n/**\n * Internal control displaying a basic number box.\n *\n * @since 1.17.0\n * @element foxy-internal-number-control\n */\nexport class InternalNumberControl extends InternalEditableControl {\n  renderControl(): TemplateResult {\n    return html`\n      <vaadin-number-field\n        error-message=${ifDefined(this._errorMessage)}\n        placeholder=${this.placeholder}\n        helper-text=${this.helperText}\n        label=${this.label}\n        class=\"w-full\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${String(this._value)}\n        clear-button-visible\n        @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n        @change=${(evt: CustomEvent) => {\n          const field = evt.currentTarget as NumberFieldElement;\n          this._value = parseFloat(field.value);\n        }}\n      >\n      </vaadin-number-field>\n    `;\n  }\n\n  protected get _value(): number {\n    return (super._value as number | undefined) ?? 0;\n  }\n\n  protected set _value(newValue: number) {\n    super._value = newValue as unknown | undefined;\n  }\n}\n"]}