@foxy.io/elements 1.27.0-beta.5 → 1.27.0-beta.6

package/dist/elements/internal/InternalAsyncResourceLinkListControl/InternalAsyncResourceLinkListControl.js

@@ -0,0 +1,224 @@
+import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { NucleonElement } from "../../public/NucleonElement/NucleonElement.js";
+import { getResourceId } from '@foxy.io/sdk/core';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from "../../../utils/class-map.js";
+import { html } from 'lit-html';
+import { css } from 'lit-element';
+import memoize from 'lodash-es/memoize';
+export class InternalAsyncResourceLinkListControl extends InternalEditableControl {
+    constructor() {
+        super(...arguments);
+        this.foreignKeyForUri = null;
+        this.foreignKeyForId = null;
+        this.ownKeyForUri = null;
+        this.optionsHref = null;
+        this.linksHref = null;
+        this.embedKey = null;
+        this.ownUri = null;
+        this.limit = 20;
+        this.item = null;
+        this.__getItemRenderer = memoize((item, hasData) => {
+            return new Function('ctx', `return ctx.html\`
+        <${item !== null && item !== void 0 ? item : 'foxy-null'}
+          related=\${JSON.stringify(ctx.related)}
+          parent=\${ctx.parent}
+          infer=""
+          ${hasData ? '.data=${ctx.data}' : 'href=${ctx.href}'}
+          ...=\${ctx.spread(ctx.props)}
+        >
+        </${item !== null && item !== void 0 ? item : 'foxy-null'}>\``);
+        }, (...args) => args.join());
+        this.__renderItem = ctx => {
+            var _a, _b, _c, _d, _e;
+            const render = this.__getItemRenderer(this.item, !!ctx.data);
+            const wrap = (content) => html `
+      <div style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)">${content}</div>
+    `;
+            if (ctx.href.startsWith('foxy://'))
+                return wrap(render(ctx));
+            let linkHref;
+            const id = getResourceId((_b = (_a = ctx.data) === null || _a === void 0 ? void 0 : _a._links.self.href) !== null && _b !== void 0 ? _b : '');
+            try {
+                const url = new URL((_c = this.linksHref) !== null && _c !== void 0 ? _c : '');
+                url.searchParams.set((_d = this.foreignKeyForId) !== null && _d !== void 0 ? _d : '', String(id !== null && id !== void 0 ? id : ''));
+                url.searchParams.set('limit', '1');
+                linkHref = url.toString();
+            }
+            catch (_f) {
+                linkHref = undefined;
+            }
+            const content = html `
+      <foxy-nucleon
+        infer=""
+        href=${ifDefined(linkHref)}
+        id="link-${id}"
+        @update=${() => this.requestUpdate()}
+      >
+        ${render(ctx)}
+      </foxy-nucleon>
+    `;
+            if (this.readonly)
+                return wrap(content);
+            const nucleon = this.renderRoot.querySelector(`#link-${id}`);
+            const checked = !!((_e = nucleon === null || nucleon === void 0 ? void 0 : nucleon.data) === null || _e === void 0 ? void 0 : _e.returned_items);
+            const isDisabled = this.disabled || !(nucleon === null || nucleon === void 0 ? void 0 : nucleon.in('idle')) || this.__isFetching;
+            return wrap(html `
+      <vaadin-checkbox
+        class="block"
+        ?disabled=${isDisabled}
+        ?checked=${checked}
+        @change=${(evt) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                const target = evt.currentTarget;
+                if (target.checked) {
+                    this.__insertLink((_b = (_a = ctx.data) === null || _a === void 0 ? void 0 : _a._links.self.href) !== null && _b !== void 0 ? _b : '');
+                }
+                else {
+                    this.__deleteLink((_h = (_g = (_f = (_d = (_c = nucleon === null || nucleon === void 0 ? void 0 : nucleon.data) === null || _c === void 0 ? void 0 : _c._embedded) === null || _d === void 0 ? void 0 : _d[(_e = this.embedKey) !== null && _e !== void 0 ? _e : '']) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g._links.self.href) !== null && _h !== void 0 ? _h : '');
+                }
+            }}
+      >
+        <div class="transition-opacity ${isDisabled ? 'opacity-50' : 'opacity-100'}">
+          ${content}
+        </div>
+      </vaadin-checkbox>
+    `);
+        };
+        this.__isFetching = false;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            foreignKeyForUri: { attribute: 'foreign-key-for-uri' },
+            foreignKeyForId: { attribute: 'foreign-key-for-id' },
+            ownKeyForUri: { attribute: 'own-key-for-uri' },
+            optionsHref: { attribute: 'options-href' },
+            linksHref: { attribute: 'links-href' },
+            embedKey: { attribute: 'embed-key' },
+            ownUri: { attribute: 'own-uri' },
+            limit: { type: Number },
+            item: {},
+            __isFetching: { attribute: false },
+        };
+    }
+    static get styles() {
+        return [
+            super.styles,
+            css `vaadin-checkbox::part(label){
+  margin:0 0 0 calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);
+  align-self:center;
+}
+      `,
+        ];
+    }
+    renderControl() {
+        var _a;
+        let firstHref;
+        try {
+            const url = new URL((_a = this.optionsHref) !== null && _a !== void 0 ? _a : '');
+            url.searchParams.set('limit', this.limit.toString());
+            firstHref = url.toString();
+        }
+        catch (_b) {
+            firstHref = undefined;
+        }
+        const nucleons = [
+            ...this.renderRoot.querySelectorAll('foxy-nucleon'),
+        ];
+        const isStatusVisible = this.__isFetching || nucleons.some(n => !n.in('idle'));
+        return html `
+      <div class="group">
+        <div
+          class=${classMap({
+            'flex justify-between transition-colors mb-xs font-medium text-s': true,
+            'text-secondary': !this.disabled && !this.readonly,
+            'text-disabled': this.disabled,
+        })}
+        >
+          <span>${this.label}</span>
+          <foxy-i18n
+            class="transition-opacity ${isStatusVisible ? 'opacity-100' : 'opacity-0'}"
+            infer=""
+            key=${this.__isFetching ? 'status_saving' : 'status_loading'}
+          >
+          </foxy-i18n>
+        </div>
+
+        <foxy-pagination first=${ifDefined(firstHref)} infer="pagination">
+          <foxy-collection-page
+            infer="card"
+            class=${classMap({
+            'block transition-colors divide-y rounded overflow-hidden': true,
+            'divide-contrast-10 ring-1 ring-inset ring-contrast-10': true,
+        })}
+            .item=${this.__renderItem}
+          >
+          </foxy-collection-page>
+        </foxy-pagination>
+
+        <div
+          class=${classMap({
+            'transition-colors mt-xs text-xs': true,
+            'text-secondary': !this.disabled && !this.readonly,
+            'text-disabled': this.disabled,
+        })}
+          ?hidden=${!this.helperText}
+        >
+          ${this.helperText}
+        </div>
+
+        <div
+          class="mt-xs text-xs leading-xs text-error"
+          ?hidden=${!this._errorMessage || this.disabled || this.readonly}
+        >
+          ${this._errorMessage}
+        </div>
+      </div>
+    `;
+    }
+    updated(changes) {
+        var _a, _b;
+        super.updated(changes);
+        if (changes.has('item'))
+            (_b = (_a = this.__getItemRenderer.cache).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    async __insertLink(foreignUri) {
+        var _a, _b, _c, _d, _e, _f;
+        this.__isFetching = true;
+        const api = new NucleonElement.API(this);
+        const response = await api.fetch((_a = this.linksHref) !== null && _a !== void 0 ? _a : '', {
+            method: 'POST',
+            body: JSON.stringify({
+                [(_b = this.foreignKeyForUri) !== null && _b !== void 0 ? _b : '']: foreignUri,
+                [(_c = this.ownKeyForUri) !== null && _c !== void 0 ? _c : '']: this.ownUri,
+            }),
+        });
+        if (response.ok) {
+            const json = await response.json();
+            const dataResponse = await api.fetch(json._links.self.href);
+            if (dataResponse.ok) {
+                const rumour = NucleonElement.Rumour((_e = (_d = this.nucleon) === null || _d === void 0 ? void 0 : _d.group) !== null && _e !== void 0 ? _e : '');
+                const data = await dataResponse.json();
+                rumour.share({
+                    related: [(_f = this.linksHref) !== null && _f !== void 0 ? _f : ''],
+                    source: json._links.self.href,
+                    data,
+                });
+            }
+        }
+        this.__isFetching = false;
+    }
+    async __deleteLink(linkUri) {
+        var _a, _b, _c;
+        this.__isFetching = true;
+        const api = new NucleonElement.API(this);
+        const response = await api.fetch(linkUri, { method: 'DELETE' });
+        if (response.ok) {
+            const rumour = NucleonElement.Rumour((_b = (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.group) !== null && _b !== void 0 ? _b : '');
+            rumour.share({ related: [(_c = this.linksHref) !== null && _c !== void 0 ? _c : ''], source: linkUri, data: null });
+        }
+        this.__isFetching = false;
+    }
+}
+//# sourceMappingURL=InternalAsyncResourceLinkListControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalAsyncResourceLinkListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncResourceLinkListControl/InternalAsyncResourceLinkListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations } from 'lit-element';\nimport type { CheckboxElement } from '@vaadin/vaadin-checkbox';\nimport type { TemplateResult } from 'lit-html';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\nimport { css } from 'lit-element';\n\nimport memoize from 'lodash-es/memoize';\n\nexport class InternalAsyncResourceLinkListControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      foreignKeyForUri: { attribute: 'foreign-key-for-uri' },\n      foreignKeyForId: { attribute: 'foreign-key-for-id' },\n      ownKeyForUri: { attribute: 'own-key-for-uri' },\n      optionsHref: { attribute: 'options-href' },\n      linksHref: { attribute: 'links-href' },\n      embedKey: { attribute: 'embed-key' },\n      ownUri: { attribute: 'own-uri' },\n      limit: { type: Number },\n      item: {},\n      __isFetching: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        vaadin-checkbox::part(label) {\n          margin: 0 0 0 calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);\n          align-self: center;\n        }\n      `,\n    ];\n  }\n\n  foreignKeyForUri: string | null = null;\n\n  foreignKeyForId: string | null = null;\n\n  ownKeyForUri: string | null = null;\n\n  optionsHref: string | null = null;\n\n  linksHref: string | null = null;\n\n  embedKey: string | null = null;\n\n  ownUri: string | null = null;\n\n  limit = 20;\n\n  item: string | null = null;\n\n  private readonly __getItemRenderer = memoize(\n    (item: string | null, hasData: boolean) => {\n      return new Function(\n        'ctx',\n        `return ctx.html\\`\n        <${item ?? 'foxy-null'}\n          related=\\${JSON.stringify(ctx.related)}\n          parent=\\${ctx.parent}\n          infer=\"\"\n          ${hasData ? '.data=${ctx.data}' : 'href=${ctx.href}'}\n          ...=\\${ctx.spread(ctx.props)}\n        >\n        </${item ?? 'foxy-null'}>\\``\n      ) as ItemRenderer;\n    },\n    (...args) => args.join()\n  );\n\n  private readonly __renderItem: ItemRenderer = ctx => {\n    const render = this.__getItemRenderer(this.item, !!ctx.data);\n    const wrap = (content: TemplateResult) => html`\n      <div style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\">${content}</div>\n    `;\n\n    if (ctx.href.startsWith('foxy://')) return wrap(render(ctx));\n    let linkHref: string | undefined;\n    const id = getResourceId(ctx.data?._links.self.href ?? '');\n\n    try {\n      const url = new URL(this.linksHref ?? '');\n      url.searchParams.set(this.foreignKeyForId ?? '', String(id ?? ''));\n      url.searchParams.set('limit', '1');\n      linkHref = url.toString();\n    } catch {\n      linkHref = undefined;\n    }\n\n    const content = html`\n      <foxy-nucleon\n        infer=\"\"\n        href=${ifDefined(linkHref)}\n        id=\"link-${id}\"\n        @update=${() => this.requestUpdate()}\n      >\n        ${render(ctx)}\n      </foxy-nucleon>\n    `;\n\n    if (this.readonly) return wrap(content);\n\n    const nucleon = this.renderRoot.querySelector(`#link-${id}`) as NucleonElement<any> | null;\n    const checked = !!nucleon?.data?.returned_items;\n    const isDisabled = this.disabled || !nucleon?.in('idle') || this.__isFetching;\n\n    return wrap(html`\n      <vaadin-checkbox\n        class=\"block\"\n        ?disabled=${isDisabled}\n        ?checked=${checked}\n        @change=${(evt: CustomEvent) => {\n          const target = evt.currentTarget as CheckboxElement;\n          if (target.checked) {\n            this.__insertLink(ctx.data?._links.self.href ?? '');\n          } else {\n            this.__deleteLink(\n              nucleon?.data?._embedded?.[this.embedKey ?? '']?.[0]?._links.self.href ?? ''\n            );\n          }\n        }}\n      >\n        <div class=\"transition-opacity ${isDisabled ? 'opacity-50' : 'opacity-100'}\">\n          ${content}\n        </div>\n      </vaadin-checkbox>\n    `);\n  };\n\n  private __isFetching = false;\n\n  renderControl(): TemplateResult {\n    let firstHref: string | undefined;\n\n    try {\n      const url = new URL(this.optionsHref ?? '');\n      url.searchParams.set('limit', this.limit.toString());\n      firstHref = url.toString();\n    } catch {\n      firstHref = undefined;\n    }\n\n    const nucleons = [\n      ...(this.renderRoot.querySelectorAll('foxy-nucleon') as NodeListOf<NucleonElement<any>>),\n    ];\n\n    const isStatusVisible = this.__isFetching || nucleons.some(n => !n.in('idle'));\n\n    return html`\n      <div class=\"group\">\n        <div\n          class=${classMap({\n            'flex justify-between transition-colors mb-xs font-medium text-s': true,\n            'text-secondary': !this.disabled && !this.readonly,\n            'text-disabled': this.disabled,\n          })}\n        >\n          <span>${this.label}</span>\n          <foxy-i18n\n            class=\"transition-opacity ${isStatusVisible ? 'opacity-100' : 'opacity-0'}\"\n            infer=\"\"\n            key=${this.__isFetching ? 'status_saving' : 'status_loading'}\n          >\n          </foxy-i18n>\n        </div>\n\n        <foxy-pagination first=${ifDefined(firstHref)} infer=\"pagination\">\n          <foxy-collection-page\n            infer=\"card\"\n            class=${classMap({\n              'block transition-colors divide-y rounded overflow-hidden': true,\n              'divide-contrast-10 ring-1 ring-inset ring-contrast-10': true,\n            })}\n            .item=${this.__renderItem}\n          >\n          </foxy-collection-page>\n        </foxy-pagination>\n\n        <div\n          class=${classMap({\n            'transition-colors mt-xs text-xs': true,\n            'text-secondary': !this.disabled && !this.readonly,\n            'text-disabled': this.disabled,\n          })}\n          ?hidden=${!this.helperText}\n        >\n          ${this.helperText}\n        </div>\n\n        <div\n          class=\"mt-xs text-xs leading-xs text-error\"\n          ?hidden=${!this._errorMessage || this.disabled || this.readonly}\n        >\n          ${this._errorMessage}\n        </div>\n      </div>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n    if (changes.has('item')) this.__getItemRenderer.cache.clear?.();\n  }\n\n  private async __insertLink(foreignUri: string) {\n    this.__isFetching = true;\n\n    const api = new NucleonElement.API(this);\n    const response = await api.fetch(this.linksHref ?? '', {\n      method: 'POST',\n      body: JSON.stringify({\n        [this.foreignKeyForUri ?? '']: foreignUri,\n        [this.ownKeyForUri ?? '']: this.ownUri,\n      }),\n    });\n\n    if (response.ok) {\n      const json = await response.json();\n      const dataResponse = await api.fetch(json._links.self.href);\n\n      if (dataResponse.ok) {\n        const rumour = NucleonElement.Rumour(this.nucleon?.group ?? '');\n        const data = await dataResponse.json();\n\n        rumour.share({\n          related: [this.linksHref ?? ''],\n          source: json._links.self.href,\n          data,\n        });\n      }\n    }\n\n    this.__isFetching = false;\n  }\n\n  private async __deleteLink(linkUri: string) {\n    this.__isFetching = true;\n\n    const api = new NucleonElement.API(this);\n    const response = await api.fetch(linkUri, { method: 'DELETE' });\n\n    if (response.ok) {\n      const rumour = NucleonElement.Rumour(this.nucleon?.group ?? '');\n      rumour.share({ related: [this.linksHref ?? ''], source: linkUri, data: null });\n    }\n\n    this.__isFetching = false;\n  }\n}\n"]}

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

@@ -0,0 +1,8 @@
+import '@vaadin/vaadin-checkbox';
+import '../../public/CollectionPage/index';
+import '../../public/NucleonElement/index';
+import '../../public/Pagination/index';
+import '../../public/I18n/index';
+import '../InternalEditableControl/index';
+import { InternalAsyncResourceLinkListControl } from './InternalAsyncResourceLinkListControl';
+export { InternalAsyncResourceLinkListControl };

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

@@ -0,0 +1,10 @@
+import '@vaadin/vaadin-checkbox';
+import "../../public/CollectionPage/index.js";
+import "../../public/NucleonElement/index.js";
+import "../../public/Pagination/index.js";
+import "../../public/I18n/index.js";
+import "../InternalEditableControl/index.js";
+import { InternalAsyncResourceLinkListControl } from "./InternalAsyncResourceLinkListControl.js";
+customElements.define('foxy-internal-async-resource-link-list-control', InternalAsyncResourceLinkListControl);
+export { InternalAsyncResourceLinkListControl };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncResourceLinkListControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,8CAA2C;AAC3C,8CAA2C;AAC3C,0CAAuC;AACvC,oCAAiC;AAEjC,6CAA0C;AAE1C,OAAO,EAAE,oCAAoC,EAAE,kDAA+C;AAE9F,cAAc,CAAC,MAAM,CACnB,gDAAgD,EAChD,oCAAoC,CACrC,CAAC;AAEF,OAAO,EAAE,oCAAoC,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-checkbox';\n\nimport '../../public/CollectionPage/index';\nimport '../../public/NucleonElement/index';\nimport '../../public/Pagination/index';\nimport '../../public/I18n/index';\n\nimport '../InternalEditableControl/index';\n\nimport { InternalAsyncResourceLinkListControl } from './InternalAsyncResourceLinkListControl';\n\ncustomElements.define(\n  'foxy-internal-async-resource-link-list-control',\n  InternalAsyncResourceLinkListControl\n);\n\nexport { InternalAsyncResourceLinkListControl };\n"]}

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

@@ -19,6 +19,16 @@ export declare class InternalForm<TData extends HALJSONResource> extends Base<TD
     static get properties(): PropertyDeclarations;
     /** Status message to render at the top of the form. If `null`, the message is hidden. */
     status: null | Status;
+    /**
+     * Renders header actions when the optional header is rendered.
+     * Empty by default.
+     */
+    renderHeaderActions(data: TData): TemplateResult | null;
+    /**
+     * Renders optional form header with ID, last update timestamp and actions list (snapshot-only).
+     * Customize which actions are rendered with `.renderHeaderActions()` method.
+     */
+    renderHeader(): TemplateResult;
     /**
      * Renders form body. This is the method you should implement in your forms
      * instead of `.render()`. If you'd like to keep the submit button and the timestamps,

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

@@ -1,6 +1,7 @@
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { NucleonElement } from "../../public/NucleonElement/NucleonElement.js";
+import { getResourceId } from '@foxy.io/sdk/core';
 import { classMap } from "../../../utils/class-map.js";
 import { html } from 'lit-html';
 const Base = ConfigurableMixin(ThemeableMixin(NucleonElement));
@@ -23,6 +24,49 @@ export class InternalForm extends Base {
             status: { type: Object },
         };
     }
+    /**
+     * Renders header actions when the optional header is rendered.
+     * Empty by default.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    renderHeaderActions(data) {
+        return null;
+    }
+    /**
+     * Renders optional form header with ID, last update timestamp and actions list (snapshot-only).
+     * Customize which actions are rendered with `.renderHeaderActions()` method.
+     */
+    renderHeader() {
+        const data = this.data;
+        const actions = data ? this.renderHeaderActions(data) : null;
+        const id = data ? getResourceId(data._links.self.href) : '';
+        return html `
+      <h2>
+        <span class="flex items-center gap-s leading-xs text-xxl font-medium break-all">
+          <foxy-i18n infer="header" key=${data ? 'title_existing' : 'title_new'} .options=${{ id }}>
+          </foxy-i18n>
+          ${data
+            ? html `
+                <foxy-copy-to-clipboard infer="header" class="text-m" text=${id}>
+                </foxy-copy-to-clipboard>
+              `
+            : ''}
+        </span>
+        ${data
+            ? html `
+              <foxy-i18n
+                infer="header"
+                class="text-l text-secondary"
+                key="subtitle"
+                .options=${data}
+              >
+              </foxy-i18n>
+              ${actions ? html `<div class="mt-xs flex gap-m">${actions}</div>` : ''}
+            `
+            : ''}
+      </h2>
+    `;
+    }
     /**
      * Renders form body. This is the method you should implement in your forms
      * instead of `.render()`. If you'd like to keep the submit button and the timestamps,

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

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

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

@@ -2,6 +2,8 @@ import '@vaadin/vaadin-button';
 import '../InternalTimestampsControl/index';
 import '../InternalCreateControl/index';
 import '../InternalDeleteControl/index';
+import '../../public/CopyToClipboard/index';
 import '../../public/Spinner/index';
+import '../../public/I18n/index';
 import { InternalForm } from './InternalForm';
 export { InternalForm };

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

@@ -2,7 +2,9 @@ import '@vaadin/vaadin-button';
 import "../InternalTimestampsControl/index.js";
 import "../InternalCreateControl/index.js";
 import "../InternalDeleteControl/index.js";
+import "../../public/CopyToClipboard/index.js";
 import "../../public/Spinner/index.js";
+import "../../public/I18n/index.js";
 import { InternalForm } from "./InternalForm.js";
 customElements.define('foxy-internal-form', InternalForm);
 export { InternalForm };

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

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

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

@@ -8,6 +8,7 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
  */
 export declare class InternalIntegerControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
+    showControls: boolean;
     prefix: string | null;
     suffix: string | null;
     min: number | null;

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

@@ -10,6 +10,7 @@ import { html } from 'lit-element';
 export class InternalIntegerControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        this.showControls = false;
         this.prefix = null;
         this.suffix = null;
         this.min = null;
@@ -18,6 +19,7 @@ export class InternalIntegerControl extends InternalEditableControl {
     static get properties() {
         return {
             ...super.properties,
+            showControls: { type: Boolean, attribute: 'show-controls' },
             prefix: {},
             suffix: {},
             min: { type: Number },
@@ -35,6 +37,7 @@ export class InternalIntegerControl extends InternalEditableControl {
         class="w-full"
         min=${ifDefined((_a = this.min) !== null && _a !== void 0 ? _a : undefined)}
         max=${ifDefined((_b = this.max) !== null && _b !== void 0 ? _b : undefined)}
+        ?has-controls=${this.showControls}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
         .checkValidity=${this._checkValidity}

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;IAAnE;;QAWE,WAAM,GAAkB,IAAI,CAAC;QAE7B,WAAM,GAAkB,IAAI,CAAC;QAE7B,QAAG,GAAkB,IAAI,CAAC;QAE1B,QAAG,GAAkB,IAAI,CAAC;IA4B5B,CAAC;IA5CC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;YACV,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACrB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACtB,CAAC;IACJ,CAAC;IAUD,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;;cAEZ,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,SAAS,CAAC;cAChC,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,SAAS,CAAC;oBAC1B,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;;mBAET,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;;UAEC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;UAChE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,+CAA+C,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;;KAE9F,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { IntegerFieldElement } from '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport type { PropertyDeclarations, 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  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      prefix: {},\n      suffix: {},\n      min: { type: Number },\n      max: { type: Number },\n    };\n  }\n\n  prefix: string | null = null;\n\n  suffix: string | null = null;\n\n  min: number | null = null;\n\n  max: number | null = null;\n\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        min=${ifDefined(this.min ?? undefined)}\n        max=${ifDefined(this.max ?? undefined)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${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        ${this.prefix ? html`<div slot=\"prefix\">${this.prefix}</div>` : ''}\n        ${this.suffix ? html`<div class=\"pr-s font-medium\" slot=\"suffix\">${this.suffix}</div>` : ''}\n      </vaadin-integer-field>\n    `;\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;IAAnE;;QAYE,iBAAY,GAAG,KAAK,CAAC;QAErB,WAAM,GAAkB,IAAI,CAAC;QAE7B,WAAM,GAAkB,IAAI,CAAC;QAE7B,QAAG,GAAkB,IAAI,CAAC;QAE1B,QAAG,GAAkB,IAAI,CAAC;IA6B5B,CAAC;IAhDC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,YAAY,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE;YAC3D,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;YACV,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACrB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACtB,CAAC;IACJ,CAAC;IAYD,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;;cAEZ,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,SAAS,CAAC;cAChC,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,SAAS,CAAC;wBACtB,IAAI,CAAC,YAAY;oBACrB,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;;mBAET,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;;UAEC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;UAChE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,+CAA+C,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;;KAE9F,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { IntegerFieldElement } from '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport type { PropertyDeclarations, 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  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      showControls: { type: Boolean, attribute: 'show-controls' },\n      prefix: {},\n      suffix: {},\n      min: { type: Number },\n      max: { type: Number },\n    };\n  }\n\n  showControls = false;\n\n  prefix: string | null = null;\n\n  suffix: string | null = null;\n\n  min: number | null = null;\n\n  max: number | null = null;\n\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        min=${ifDefined(this.min ?? undefined)}\n        max=${ifDefined(this.max ?? undefined)}\n        ?has-controls=${this.showControls}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .value=${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        ${this.prefix ? html`<div slot=\"prefix\">${this.prefix}</div>` : ''}\n        ${this.suffix ? html`<div class=\"pr-s font-medium\" slot=\"suffix\">${this.suffix}</div>` : ''}\n      </vaadin-integer-field>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,10 @@
+import type { PropertyDeclarations } from 'lit-element';
+import type { TemplateResult } from 'lit-html';
+import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+import { Operator } from '../../public/QueryBuilder/types';
+export declare class InternalQueryBuilderControl extends InternalEditableControl {
+    static get properties(): PropertyDeclarations;
+    operators: Operator[];
+    disableOr: boolean;
+    renderControl(): TemplateResult;
+}

package/dist/elements/internal/InternalQueryBuilderControl/InternalQueryBuilderControl.js

@@ -0,0 +1,51 @@
+import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { Operator } from "../../public/QueryBuilder/types.js";
+import { classMap } from "../../../utils/class-map.js";
+import { html } from 'lit-html';
+export class InternalQueryBuilderControl extends InternalEditableControl {
+    constructor() {
+        super(...arguments);
+        this.operators = Object.values(Operator);
+        this.disableOr = false;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            operators: { type: Array },
+            disableOr: { type: Boolean, attribute: 'disable-or' },
+        };
+    }
+    renderControl() {
+        const { label, helperText, _errorMessage: error } = this;
+        const showError = error && !this.disabled && !this.readonly;
+        return html `
+      <section
+        class=${classMap({
+            'grid gap-xs leading-xs transition-colors': true,
+            'text-secondary hover-text-body': !this.disabled && !this.readonly,
+            'text-disabled': this.disabled,
+            'text-body': this.readonly,
+        })}
+      >
+        ${label ? html `<p class="text-s font-medium">${label}</p>` : ''}
+
+        <foxy-query-builder
+          infer="query-builder"
+          .operators=${this.operators}
+          .value=${this._value}
+          ?disable-or=${this.disableOr}
+          @change=${(evt) => {
+            var _a;
+            const queryBuilder = evt.currentTarget;
+            this._value = (_a = queryBuilder.value) !== null && _a !== void 0 ? _a : '';
+        }}
+        >
+        </foxy-query-builder>
+
+        ${helperText ? html `<p class="text-xs">${helperText}</p>` : ''}
+        ${showError ? html `<p class="text-xs text-error">${error}</p>` : ''}
+      </section>
+    `;
+    }
+}
+//# sourceMappingURL=InternalQueryBuilderControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalQueryBuilderControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalQueryBuilderControl/InternalQueryBuilderControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,QAAQ,EAAE,2CAAwC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,2BAA4B,SAAQ,uBAAuB;IAAxE;;QASE,cAAS,GAAe,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAEhD,cAAS,GAAG,KAAK,CAAC;IAkCpB,CAAC;IA5CC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YAC1B,SAAS,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE;SACtD,CAAC;IACJ,CAAC;IAMD,aAAa;QACX,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACzD,MAAM,SAAS,GAAG,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QAE5D,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,0CAA0C,EAAE,IAAI;YAChD,gCAAgC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAClE,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,WAAW,EAAE,IAAI,CAAC,QAAQ;SAC3B,CAAC;;UAEA,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,iCAAiC,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE;;;;uBAIhD,IAAI,CAAC,SAAS;mBAClB,IAAI,CAAC,MAAM;wBACN,IAAI,CAAC,SAAS;oBAClB,CAAC,GAAgB,EAAE,EAAE;;YAC7B,MAAM,YAAY,GAAG,GAAG,CAAC,aAA6B,CAAC;YACvD,IAAI,CAAC,MAAM,SAAG,YAAY,CAAC,KAAK,mCAAI,EAAE,CAAC;QACzC,CAAC;;;;UAID,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE;UAC5D,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,iCAAiC,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE;;KAEtE,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { QueryBuilder } from '../../public/QueryBuilder/QueryBuilder';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { Operator } from '../../public/QueryBuilder/types';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nexport class InternalQueryBuilderControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      operators: { type: Array },\n      disableOr: { type: Boolean, attribute: 'disable-or' },\n    };\n  }\n\n  operators: Operator[] = Object.values(Operator);\n\n  disableOr = false;\n\n  renderControl(): TemplateResult {\n    const { label, helperText, _errorMessage: error } = this;\n    const showError = error && !this.disabled && !this.readonly;\n\n    return html`\n      <section\n        class=${classMap({\n          'grid gap-xs leading-xs transition-colors': true,\n          'text-secondary hover-text-body': !this.disabled && !this.readonly,\n          'text-disabled': this.disabled,\n          'text-body': this.readonly,\n        })}\n      >\n        ${label ? html`<p class=\"text-s font-medium\">${label}</p>` : ''}\n\n        <foxy-query-builder\n          infer=\"query-builder\"\n          .operators=${this.operators}\n          .value=${this._value}\n          ?disable-or=${this.disableOr}\n          @change=${(evt: CustomEvent) => {\n            const queryBuilder = evt.currentTarget as QueryBuilder;\n            this._value = queryBuilder.value ?? '';\n          }}\n        >\n        </foxy-query-builder>\n\n        ${helperText ? html`<p class=\"text-xs\">${helperText}</p>` : ''}\n        ${showError ? html`<p class=\"text-xs text-error\">${error}</p>` : ''}\n      </section>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,4 @@
+import '../InternalEditableControl/index';
+import '../../public/QueryBuilder/index';
+import { InternalQueryBuilderControl } from './InternalQueryBuilderControl';
+export { InternalQueryBuilderControl };

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

@@ -0,0 +1,6 @@
+import "../InternalEditableControl/index.js";
+import "../../public/QueryBuilder/index.js";
+import { InternalQueryBuilderControl } from "./InternalQueryBuilderControl.js";
+customElements.define('foxy-internal-query-builder-control', InternalQueryBuilderControl);
+export { InternalQueryBuilderControl };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalQueryBuilderControl/index.ts"],"names":[],"mappings":"AAAA,6CAA0C;AAE1C,4CAAyC;AAEzC,OAAO,EAAE,2BAA2B,EAAE,yCAAsC;AAE5E,cAAc,CAAC,MAAM,CAAC,qCAAqC,EAAE,2BAA2B,CAAC,CAAC;AAE1F,OAAO,EAAE,2BAA2B,EAAE,CAAC","sourcesContent":["import '../InternalEditableControl/index';\n\nimport '../../public/QueryBuilder/index';\n\nimport { InternalQueryBuilderControl } from './InternalQueryBuilderControl';\n\ncustomElements.define('foxy-internal-query-builder-control', InternalQueryBuilderControl);\n\nexport { InternalQueryBuilderControl };\n"]}