@foxy.io/elements 1.16.0-beta.1 → 1.16.0-beta.12

package/dist/cdn/translations/webhook-card/en.json

@@ -0,0 +1,7 @@
+{
+  "spinner": {
+    "loading_busy": "Loading",
+    "loading_error": "Failed to load",
+    "loading_empty": "No data"
+  }
+}

package/dist/cdn/translations/webhook-form/en.json

@@ -0,0 +1,101 @@
+{
+  "name": {
+    "label": "Name",
+    "placeholder": "My JSON Webhook",
+    "helper_text": "The name of this webhook.",
+    "v8n_required": "Webhook name is required",
+    "v8n_too_long": "Webhook name cannot exceed 255 characters"
+  },
+  "format": {
+    "label": "Format",
+    "helper_text": "The type of this webhook.",
+    "v8n_required": "Please select a format"
+  },
+  "version": {
+    "label": "Version",
+    "placeholder": "2",
+    "helper_text": "Version of the webhook. Enter 2 for latest or use other if you have specific instructions from Foxy.",
+    "v8n_required": "Version is required"
+  },
+  "url": {
+    "label": "URL",
+    "placeholder": "https://example.com/webhook",
+    "helper_text": "The endpoint where we will send the webhook data.",
+    "v8n_too_long": "URL cannot exceed 1000 characters"
+  },
+  "query": {
+    "label": "Query",
+    "placeholder": "zoom=items,items:options,customer",
+    "helper_text": "The webhook payload mirrors the API, and you can include more or less data according to your needs using zoom and other modifiers.",
+    "v8n_too_long": "Query cannot exceed 1000 characters"
+  },
+  "encryption-key": {
+    "label": "Encryption key",
+    "placeholder": "HNL978XVXXCM66DM5N2T78D5MT66BC6D",
+    "helper_text": "The JSON webhooks are encrypted in certain situations. This key is also used to generate a signature to verify the integrity of the payload.",
+    "v8n_too_long": "Encryption key cannot exceed 1000 characters"
+  },
+  "event-resource": {
+    "label": "Resource",
+    "helper_text": "Changes in selected resource type will trigger this webhook.",
+    "event_resource_subscription": "Subscription",
+    "event_resource_transaction": "Transaction",
+    "event_resource_customer": "Customer"
+  },
+  "statuses": {
+    "title": "Statuses",
+    "pagination": {
+      "first": "First",
+      "last": "Last",
+      "next": "Next",
+      "pagination": "{{from}}-{{to}} out of {{total}}",
+      "previous": "Previous",
+      "card": {
+        "status_successful": "Successful",
+        "status_pending": "Pending",
+        "status_failed": "Failed",
+        "date": "{{value, date}}",
+        "spinner": {
+          "loading_busy": "Loading",
+          "loading_error": "Failed to load",
+          "loading_empty": "No data"
+        }
+      }
+    }
+  },
+  "logs": {
+    "title": "Logs",
+    "pagination": {
+      "first": "First",
+      "last": "Last",
+      "next": "Next",
+      "pagination": "{{from}}-{{to}} out of {{total}}",
+      "previous": "Previous",
+      "card": {
+        "date": "{{value, date}}",
+        "spinner": {
+          "loading_busy": "Loading",
+          "loading_error": "Failed to load",
+          "loading_empty": "No data"
+        }
+      }
+    }
+  },
+  "timestamps": {
+    "date_created": "Created on",
+    "date_modified": "Last updated",
+    "date": "{{value, date}}"
+  },
+  "delete": {
+    "delete": "Delete",
+    "cancel": "Cancel",
+    "delete_prompt": "Are you sure you'd like to remove this webhook? You won't be able to bring it back."
+  },
+  "create": {
+    "create": "Create"
+  },
+  "spinner": {
+    "loading_busy": "Loading",
+    "loading_error": "Failed to load"
+  }
+}

package/dist/cdn/translations/webhook-log-card/en.json

@@ -0,0 +1,8 @@
+{
+  "date": "{{value, date}}",
+  "spinner": {
+    "loading_busy": "Loading",
+    "loading_error": "Failed to load",
+    "loading_empty": "No data"
+  }
+}

package/dist/cdn/translations/webhook-status-card/en.json

@@ -0,0 +1,11 @@
+{
+  "status_successful": "Successful",
+  "status_pending": "Pending",
+  "status_failed": "Failed",
+  "date": "{{value, date}}",
+  "spinner": {
+    "loading_busy": "Loading",
+    "loading_error": "Failed to load",
+    "loading_empty": "No data"
+  }
+}

package/dist/elements/index.d.ts

@@ -0,0 +1 @@
+export * from './public/index';

package/dist/elements/index.js

@@ -0,0 +1,2 @@
+export * from "./public/index.js";
+//# sourceMappingURL=index.js.map

package/dist/elements/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/elements/index.ts"],"names":[],"mappings":"AAAA,kCAA+B","sourcesContent":["export * from './public/index';\n"]}

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

@@ -0,0 +1,22 @@
+import type { TemplateResult } from 'lit-html';
+import { PropertyDeclarations } from 'lit-element';
+import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+/**
+ * Internal control displaying a combo box where items are loaded from
+ * a hAPI collection.
+ *
+ * @since 1.17.0
+ * @element foxy-internal-async-combo-box-control
+ */
+export declare class InternalAsyncComboBoxControl extends InternalEditableControl {
+    static get properties(): PropertyDeclarations;
+    /** Same as `itemLabelPath` property of Vaadin's `ComboBoxElement`. */
+    itemLabelPath: string | null;
+    /** Same as `itemValuePath` property of Vaadin's `ComboBoxElement`. */
+    itemValuePath: string | null;
+    /** URL of the first page of the hAPI collection serving as a source for items. */
+    first: string | null;
+    renderControl(): TemplateResult;
+    protected get _value(): string;
+    protected set _value(newValue: string);
+}

package/dist/elements/internal/InternalAsyncComboBoxControl/InternalAsyncComboBoxControl.js

@@ -0,0 +1,79 @@
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
+import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { API } from "../../public/NucleonElement/API.js";
+/**
+ * Internal control displaying a combo box where items are loaded from
+ * a hAPI collection.
+ *
+ * @since 1.17.0
+ * @element foxy-internal-async-combo-box-control
+ */
+export class InternalAsyncComboBoxControl extends InternalEditableControl {
+    constructor() {
+        super(...arguments);
+        /** Same as `itemLabelPath` property of Vaadin's `ComboBoxElement`. */
+        this.itemLabelPath = null;
+        /** Same as `itemValuePath` property of Vaadin's `ComboBoxElement`. */
+        this.itemValuePath = null;
+        /** URL of the first page of the hAPI collection serving as a source for items. */
+        this.first = null;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            itemLabelPath: { type: String, attribute: 'item-label-path' },
+            itemValuePath: { type: String, attribute: 'item-value-path' },
+            first: { type: String },
+        };
+    }
+    renderControl() {
+        var _a, _b;
+        const dataProvider = async (params, callback) => {
+            if (!this.first)
+                return callback([], 0);
+            const url = new URL(this.first);
+            url.searchParams.set('offset', String(params.page * params.pageSize));
+            url.searchParams.set('limit', String(params.pageSize));
+            if (params.filter && this.itemLabelPath) {
+                url.searchParams.set(this.itemLabelPath, `*${params.filter}*`);
+            }
+            const response = await new API(this).fetch(url.toString());
+            if (!response.ok)
+                throw new Error(await response.text());
+            const json = await response.json();
+            const items = Array.from(Object.values(json._embedded))[0];
+            callback(items, json.total_items);
+        };
+        return html `
+      <vaadin-combo-box
+        item-value-path=${ifDefined((_a = this.itemValuePath) !== null && _a !== void 0 ? _a : undefined)}
+        item-label-path=${ifDefined((_b = this.itemLabelPath) !== null && _b !== void 0 ? _b : undefined)}
+        error-message=${ifDefined(this._errorMessage)}
+        item-id-path="_links.self.href"
+        helper-text=${this.helperText}
+        placeholder=${this.placeholder}
+        label=${this.label}
+        class="w-full"
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        .checkValidity=${this._checkValidity}
+        .dataProvider=${dataProvider}
+        .value=${this._value}
+        @change=${(evt) => {
+            const comboBox = evt.currentTarget;
+            this._value = comboBox.value;
+        }}
+      >
+      </vaadin-combo-box>
+    `;
+    }
+    get _value() {
+        var _a;
+        return (_a = super._value) !== null && _a !== void 0 ? _a : '';
+    }
+    set _value(newValue) {
+        super._value = newValue;
+    }
+}
+//# sourceMappingURL=InternalAsyncComboBoxControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalAsyncComboBoxControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncComboBoxControl/InternalAsyncComboBoxControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ComboBoxDataProvider, ComboBoxElement } from '@vaadin/vaadin-combo-box';\nimport type { TemplateResult } from 'lit-html';\n\nimport { PropertyDeclarations } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { API } from '../../public/NucleonElement/API';\n\n/**\n * Internal control displaying a combo box where items are loaded from\n * a hAPI collection.\n *\n * @since 1.17.0\n * @element foxy-internal-async-combo-box-control\n */\nexport class InternalAsyncComboBoxControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      itemLabelPath: { type: String, attribute: 'item-label-path' },\n      itemValuePath: { type: String, attribute: 'item-value-path' },\n      first: { type: String },\n    };\n  }\n\n  /** Same as `itemLabelPath` property of Vaadin's `ComboBoxElement`. */\n  itemLabelPath: string | null = null;\n\n  /** Same as `itemValuePath` property of Vaadin's `ComboBoxElement`. */\n  itemValuePath: string | null = null;\n\n  /** URL of the first page of the hAPI collection serving as a source for items. */\n  first: string | null = null;\n\n  renderControl(): TemplateResult {\n    const dataProvider: ComboBoxDataProvider = async (params, callback) => {\n      if (!this.first) return callback([], 0);\n\n      const url = new URL(this.first);\n      url.searchParams.set('offset', String(params.page * params.pageSize));\n      url.searchParams.set('limit', String(params.pageSize));\n\n      if (params.filter && this.itemLabelPath) {\n        url.searchParams.set(this.itemLabelPath, `*${params.filter}*`);\n      }\n\n      const response = await new API(this).fetch(url.toString());\n      if (!response.ok) throw new Error(await response.text());\n\n      const json = await response.json();\n      const items = Array.from(Object.values(json._embedded))[0] as unknown[];\n\n      callback(items, json.total_items);\n    };\n\n    return html`\n      <vaadin-combo-box\n        item-value-path=${ifDefined(this.itemValuePath ?? undefined)}\n        item-label-path=${ifDefined(this.itemLabelPath ?? undefined)}\n        error-message=${ifDefined(this._errorMessage)}\n        item-id-path=\"_links.self.href\"\n        helper-text=${this.helperText}\n        placeholder=${this.placeholder}\n        label=${this.label}\n        class=\"w-full\"\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        .checkValidity=${this._checkValidity}\n        .dataProvider=${dataProvider}\n        .value=${this._value}\n        @change=${(evt: CustomEvent) => {\n          const comboBox = evt.currentTarget as ComboBoxElement;\n          this._value = comboBox.value;\n        }}\n      >\n      </vaadin-combo-box>\n    `;\n  }\n\n  protected get _value(): string {\n    return (super._value as string | undefined) ?? '';\n  }\n\n  protected set _value(newValue: string) {\n    super._value = newValue as unknown | undefined;\n  }\n}\n"]}

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

@@ -0,0 +1,4 @@
+import '@vaadin/vaadin-combo-box';
+import '../InternalEditableControl/index';
+import { InternalAsyncComboBoxControl as Control } from './InternalAsyncComboBoxControl';
+export { Control as InternalAsyncComboBoxControl };

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

@@ -0,0 +1,6 @@
+import '@vaadin/vaadin-combo-box';
+import "../InternalEditableControl/index.js";
+import { InternalAsyncComboBoxControl as Control } from "./InternalAsyncComboBoxControl.js";
+customElements.define('foxy-internal-async-combo-box-control', Control);
+export { Control as InternalAsyncComboBoxControl };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncComboBoxControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,6CAA0C;AAC1C,OAAO,EAAE,4BAA4B,IAAI,OAAO,EAAE,0CAAuC;AAEzF,cAAc,CAAC,MAAM,CAAC,uCAAuC,EAAE,OAAO,CAAC,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-combo-box';\nimport '../InternalEditableControl/index';\nimport { InternalAsyncComboBoxControl as Control } from './InternalAsyncComboBoxControl';\n\ncustomElements.define('foxy-internal-async-combo-box-control', Control);\n\nexport { Control as InternalAsyncComboBoxControl };\n"]}

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

@@ -0,0 +1,31 @@
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { CollectionPage } from '../../public';
+import type { FormDialog } from '../../index';
+import { InternalControl } from '../InternalControl/InternalControl';
+/**
+ * Internal control displaying a collapsible card with
+ * optionally editable hAPI collection items.
+ *
+ * @element foxy-internal-async-details-control
+ * @since 1.17.0
+ */
+export declare class InternalAsyncDetailsControl 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'];
+    /** Same as the `open` property of `InternalDetails`. */
+    open: boolean;
+    private __cachedCardRenderer;
+    private __itemRenderer;
+    renderControl(): TemplateResult;
+    private get __dialog();
+    private get __cardRenderer();
+}

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

@@ -0,0 +1,140 @@
+import { InternalControl } from "../InternalControl/InternalControl.js";
+import { classMap } from "../../../utils/class-map.js";
+import { html } from 'lit-element';
+/**
+ * Internal control displaying a collapsible card with
+ * optionally editable hAPI collection items.
+ *
+ * @element foxy-internal-async-details-control
+ * @since 1.17.0
+ */
+export class InternalAsyncDetailsControl 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 = '';
+        /** Same as the `open` property of `InternalDetails`. */
+        this.open = false;
+        this.__cachedCardRenderer = null;
+        this.__itemRenderer = ctx => {
+            if (!this.form || !ctx.data)
+                return this.__cardRenderer(ctx);
+            const isDisabled = this.disabledSelector.matches('card', true);
+            return html `
+      <button
+        ?disabled=${isDisabled}
+        class=${classMap({
+                '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>
+    `;
+        };
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            related: { type: Array },
+            first: { type: String },
+            limit: { type: Number },
+            form: { type: String },
+            item: { type: String },
+            open: { type: Boolean },
+        };
+    }
+    renderControl() {
+        let first;
+        try {
+            const url = new URL(this.first);
+            url.searchParams.set('limit', String(this.limit));
+            first = url.toString();
+        }
+        catch (_a) {
+            first = this.first;
+        }
+        return html `
+      <foxy-internal-details
+        summary="title"
+        infer=""
+        ?open=${this.open}
+        @toggle=${(evt) => (this.open = evt.currentTarget.open)}
+      >
+        ${this.form
+            ? html `
+              <foxy-form-dialog
+                parent=${first}
+                infer="dialog"
+                id="form"
+                .related=${this.related}
+                .form=${this.form}
+              >
+              </foxy-form-dialog>
+
+              ${this.readonly
+                ? ''
+                : html `
+                    <button
+                      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"
+                      slot="actions"
+                      ?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);
+                }}
+                    >
+                      <iron-icon class="icon-inline" icon="icons:add"></iron-icon>
+                    </button>
+                  `}
+            `
+            : ''}
+
+        <foxy-pagination class="px-m pb-s" first=${first} infer="pagination">
+          <foxy-collection-page
+            class="-mx-m block divide-y divide-contrast-10 mb-s"
+            infer="card"
+            .related=${this.related}
+            .item=${this.__itemRenderer}
+          >
+          </foxy-collection-page>
+        </foxy-pagination>
+      </foxy-internal-details>
+    `;
+    }
+    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: 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}>\``),
+            };
+        }
+        return this.__cachedCardRenderer.render;
+    }
+}
+//# sourceMappingURL=InternalAsyncDetailsControl.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,8 @@
+import '../../public/CollectionPage/index';
+import '../../public/FormDialog/index';
+import '../../public/Pagination/index';
+import '../../public/I18n/index';
+import '../InternalControl/index';
+import '../InternalDetails/index';
+import { InternalAsyncDetailsControl as Control } from './InternalAsyncDetailsControl';
+export { Control as InternalAsyncDetailsControl };

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

@@ -0,0 +1,10 @@
+import "../../public/CollectionPage/index.js";
+import "../../public/FormDialog/index.js";
+import "../../public/Pagination/index.js";
+import "../../public/I18n/index.js";
+import "../InternalControl/index.js";
+import "../InternalDetails/index.js";
+import { InternalAsyncDetailsControl as Control } from "./InternalAsyncDetailsControl.js";
+customElements.define('foxy-internal-async-details-control', Control);
+export { Control as InternalAsyncDetailsControl };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncDetailsControl/index.ts"],"names":[],"mappings":"AAAA,8CAA2C;AAC3C,0CAAuC;AACvC,0CAAuC;AACvC,oCAAiC;AAEjC,qCAAkC;AAClC,qCAAkC;AAElC,OAAO,EAAE,2BAA2B,IAAI,OAAO,EAAE,yCAAsC;AAEvF,cAAc,CAAC,MAAM,CAAC,qCAAqC,EAAE,OAAO,CAAC,CAAC;AAEtE,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,CAAC","sourcesContent":["import '../../public/CollectionPage/index';\nimport '../../public/FormDialog/index';\nimport '../../public/Pagination/index';\nimport '../../public/I18n/index';\n\nimport '../InternalControl/index';\nimport '../InternalDetails/index';\n\nimport { InternalAsyncDetailsControl as Control } from './InternalAsyncDetailsControl';\n\ncustomElements.define('foxy-internal-async-details-control', Control);\n\nexport { Control as InternalAsyncDetailsControl };\n"]}

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

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

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

@@ -0,0 +1,53 @@
+import { ThemeableMixin } from "../../../mixins/themeable.js";
+import { NucleonElement } from "../../public/NucleonElement/NucleonElement.js";
+import { classMap } from "../../../utils/class-map.js";
+import { html } from 'lit-html';
+/**
+ * Internal base element for cards.
+ *
+ * @since 1.17.0
+ * @element foxy-internal-card
+ */
+export class InternalCard extends ThemeableMixin(NucleonElement) {
+    /**
+     * Invoked together with `.render()` to obtain a template for card contents.
+     * When extending `InternalCard`, prefer overriding this method to `.render()`.
+     */
+    renderBody() {
+        return html ``;
+    }
+    render() {
+        return html `
+      <div
+        aria-busy=${this.in('busy')}
+        aria-live="polite"
+        class="relative leading-m text-body text-m font-lumo"
+      >
+        <div
+          class=${classMap({
+            'transition duration-500 ease-in-out': true,
+            'opacity-0 pointer-events-none': !this.in({ idle: 'snapshot' }),
+        })}
+        >
+          ${this.renderBody()}
+        </div>
+
+        <div
+          class=${classMap({
+            'transition duration-500 ease-in-out absolute inset-0 flex': true,
+            'opacity-0 pointer-events-none': this.in({ idle: 'snapshot' }),
+        })}
+        >
+          <foxy-spinner
+            layout=${this.in('busy') ? 'no-label' : 'horizontal'}
+            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}
+            class="m-auto"
+            infer="spinner"
+          >
+          </foxy-spinner>
+        </div>
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=InternalCard.js.map

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

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

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

@@ -0,0 +1,3 @@
+import '../../public/Spinner/index';
+import { InternalCard } from './InternalCard';
+export { InternalCard };

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

@@ -0,0 +1,5 @@
+import "../../public/Spinner/index.js";
+import { InternalCard } from "./InternalCard.js";
+customElements.define('foxy-internal-card', InternalCard);
+export { InternalCard };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalCard/index.ts"],"names":[],"mappings":"AAAA,uCAAoC;AACpC,OAAO,EAAE,YAAY,EAAE,0BAAuB;AAE9C,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import '../../public/Spinner/index';\nimport { InternalCard } from './InternalCard';\n\ncustomElements.define('foxy-internal-card', InternalCard);\n\nexport { InternalCard };\n"]}

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

@@ -0,0 +1,41 @@
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import { LitElement } from 'lit-element';
+import { NucleonElement } from '../../public/NucleonElement/NucleonElement';
+declare const InternalControl_base: typeof LitElement & import("lit-element").Constructor<import("../../../mixins/inferrable").InferrableMixinHost> & {
+    inferredProperties: string[];
+} & {
+    styles: import("lit-element").CSSResultArray;
+} & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
+/**
+ * An internal base class for any control in a Nucleon form. That control can be as simple as a text field bound
+ * to a property or as complex as a query builder, and it infers property values from the
+ * parent Nucleon/Configurable/Translatable element, saving the need to manually calculate
+ * and bind properties in Lit templates. Each control renders before and after slots in the regular DOM + its
+ * own layout in the shadow DOM. When hidden via `hiddencontrols` in the parent,
+ * uses `display: none` to hide itself.
+ *
+ * @element foxy-internal-control
+ * @since 1.17.0
+ */
+export declare class InternalControl extends InternalControl_base {
+    static get inferredProperties(): string[];
+    static get properties(): PropertyDeclarations;
+    /** NucleonElement instance this control is bound to. */
+    nucleon: NucleonElement<any> | null;
+    inferFromElement(key: string, element: HTMLElement): unknown | undefined;
+    applyInferredProperties(context: Map<string, unknown>): void;
+    updated(changes: Map<keyof this, unknown>): void;
+    /**
+     * Renders the control itself. In most cases, you will need to implement
+     * this method instead of `.render()` in your class to keep the before and after templates/slots.
+     */
+    renderControl(): TemplateResult;
+    /**
+     * Renders the control (if visible) and the before/after templates/slots.
+     * You should probably implement `.renderControl()` method instead of this one in your class.
+     */
+    render(): TemplateResult;
+}
+export {};