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

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"]}

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

@@ -0,0 +1,16 @@
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { Option } from '../../public/QueryBuilder/types';
+import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+export declare class InternalResourcePickerControl extends InternalEditableControl {
+    static get properties(): PropertyDeclarations;
+    virtualHost: string;
+    filters: Option[];
+    first: string | null;
+    item: string | null;
+    private readonly __getItemRenderer;
+    renderControl(): TemplateResult;
+    updated(changes: Map<keyof this, unknown>): void;
+    private __handleFetchEvent;
+    private __handleEmpty;
+    private __handleSelect;
+}

package/dist/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.js

@@ -0,0 +1,167 @@
+import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { FetchEvent } from "../../public/NucleonElement/FetchEvent.js";
+import { classMap } from "../../../utils/class-map.js";
+import { uniqueId } from 'lodash-es';
+import { spread } from '@open-wc/lit-helpers';
+import { html } from 'lit-html';
+import memoize from 'lodash-es/memoize';
+export class InternalResourcePickerControl extends InternalEditableControl {
+    constructor() {
+        super(...arguments);
+        this.virtualHost = uniqueId('internal-resource-picker-control-');
+        this.filters = [];
+        this.first = null;
+        this.item = null;
+        this.__getItemRenderer = memoize((item) => {
+            return new Function('ctx', `return ctx.html\`
+        <${item !== null && item !== void 0 ? item : 'foxy-null'}
+          related=\${JSON.stringify(ctx.related)}
+          parent=\${ctx.parent}
+          infer="card"
+          href=$\{ctx.href}
+          ...=\${ctx.spread(ctx.props)}
+        >
+        </${item !== null && item !== void 0 ? item : 'foxy-null'}>\``);
+        });
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            virtualHost: {},
+            filters: { type: Array },
+            first: {},
+            item: {},
+        };
+    }
+    renderControl() {
+        var _a, _b;
+        return html `
+      <foxy-form-dialog
+        parent="foxy://${this.virtualHost}/select"
+        infer="dialog"
+        form="foxy-internal-resource-picker-control-form"
+        alert
+        .props=${{
+            '.selectionProps': {
+                '.filters': this.filters,
+                '.first': this.first,
+                '.item': this.item,
+            },
+        }}
+        @fetch=${this.__handleFetchEvent}
+      >
+      </foxy-form-dialog>
+
+      <div class="block group">
+        <div
+          class=${classMap({
+            'transition-colors mb-xs font-medium text-s': true,
+            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,
+            'text-secondary': this.readonly,
+            'text-disabled': this.disabled,
+        })}
+        >
+          ${this.label}
+        </div>
+
+        <button
+          class=${classMap({
+            'block w-full rounded text-left transition-colors': true,
+            'border border-dashed': true,
+            'border-transparent': !this.readonly,
+            'cursor-pointer bg-contrast-5 hover-bg-contrast-10': !this.disabled && !this.readonly,
+            'cursor-default bg-contrast-5': this.disabled,
+            'cursor-default border-contrast-30': this.readonly,
+            'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+        })}
+          style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+          ?disabled=${this.disabled || this.readonly}
+          @click=${(evt) => {
+            const button = evt.currentTarget;
+            const dialog = this.renderRoot.querySelector('foxy-form-dialog');
+            dialog.href = '';
+            dialog.show(button);
+        }}
+        >
+          <div class=${classMap({ 'transition-opacity': true, 'opacity-50': this.disabled })}>
+            ${this.__getItemRenderer(this.item)({
+            html,
+            data: null,
+            href: this._value || '',
+            related: [],
+            parent: '',
+            props: {},
+            spread: spread,
+            simplifyNsLoading: this.simplifyNsLoading,
+            disabled: this.disabled,
+            disabledControls: this.disabledControls,
+            readonly: this.readonly,
+            readonlyControls: this.readonlyControls,
+            hidden: this.hidden,
+            hiddenControls: this.hiddenControls,
+            templates: this.templates,
+            previous: null,
+            next: null,
+            group: (_b = (_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.group) !== null && _b !== void 0 ? _b : '',
+            lang: this.lang,
+            ns: this.ns,
+        })}
+          </div>
+        </button>
+
+        <div
+          class=${classMap({
+            'transition-colors mt-xs text-xs': true,
+            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,
+            'text-secondary': 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);
+    }
+    __handleFetchEvent(event) {
+        if (!(event instanceof FetchEvent))
+            return;
+        if (event.defaultPrevented)
+            return;
+        const { url, method } = event.request;
+        if (url === `foxy://${this.virtualHost}/select` && method === 'POST') {
+            return event.respondWith(this.__handleSelect(event.request));
+        }
+        if (url === `foxy://${this.virtualHost}/empty` && method === 'GET') {
+            return event.respondWith(this.__handleEmpty());
+        }
+    }
+    async __handleEmpty() {
+        return new Response(JSON.stringify({
+            _links: { self: { href: `foxy://${this.virtualHost}/empty` } },
+            message: 'Resource selected.',
+        }));
+    }
+    async __handleSelect(request) {
+        const body = (await request.clone().json());
+        this._value = body.selection;
+        return new Response(JSON.stringify({
+            _links: { self: { href: `foxy://${this.virtualHost}/empty` } },
+            message: 'Resource selected.',
+        }));
+    }
+}
+//# sourceMappingURL=InternalResourcePickerControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalResourcePickerControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\nimport type { FormDialog } from '../../public/FormDialog/FormDialog';\nimport type { Option } from '../../public/QueryBuilder/types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { FetchEvent } from '../../public/NucleonElement/FetchEvent';\nimport { classMap } from '../../../utils/class-map';\nimport { uniqueId } from 'lodash-es';\nimport { spread } from '@open-wc/lit-helpers';\nimport { html } from 'lit-html';\n\nimport memoize from 'lodash-es/memoize';\n\nexport class InternalResourcePickerControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      virtualHost: {},\n      filters: { type: Array },\n      first: {},\n      item: {},\n    };\n  }\n\n  virtualHost = uniqueId('internal-resource-picker-control-');\n\n  filters: Option[] = [];\n\n  first: string | null = null;\n\n  item: string | null = null;\n\n  private readonly __getItemRenderer = memoize((item: string | null) => {\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=\"card\"\n          href=$\\{ctx.href}\n          ...=\\${ctx.spread(ctx.props)}\n        >\n        </${item ?? 'foxy-null'}>\\``\n    ) as ItemRenderer;\n  });\n\n  renderControl(): TemplateResult {\n    return html`\n      <foxy-form-dialog\n        parent=\"foxy://${this.virtualHost}/select\"\n        infer=\"dialog\"\n        form=\"foxy-internal-resource-picker-control-form\"\n        alert\n        .props=${{\n          '.selectionProps': {\n            '.filters': this.filters,\n            '.first': this.first,\n            '.item': this.item,\n          },\n        }}\n        @fetch=${this.__handleFetchEvent}\n      >\n      </foxy-form-dialog>\n\n      <div class=\"block group\">\n        <div\n          class=${classMap({\n            'transition-colors mb-xs font-medium text-s': true,\n            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n            'text-secondary': this.readonly,\n            'text-disabled': this.disabled,\n          })}\n        >\n          ${this.label}\n        </div>\n\n        <button\n          class=${classMap({\n            'block w-full rounded text-left transition-colors': true,\n            'border border-dashed': true,\n            'border-transparent': !this.readonly,\n            'cursor-pointer bg-contrast-5 hover-bg-contrast-10': !this.disabled && !this.readonly,\n            'cursor-default bg-contrast-5': this.disabled,\n            'cursor-default border-contrast-30': this.readonly,\n            'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n          })}\n          style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n          ?disabled=${this.disabled || this.readonly}\n          @click=${(evt: MouseEvent) => {\n            const button = evt.currentTarget as HTMLButtonElement;\n            const dialog = this.renderRoot.querySelector('foxy-form-dialog') as FormDialog;\n\n            dialog.href = '';\n            dialog.show(button);\n          }}\n        >\n          <div class=${classMap({ 'transition-opacity': true, 'opacity-50': this.disabled })}>\n            ${this.__getItemRenderer(this.item)({\n              html,\n              data: null,\n              href: (this._value as string | undefined) || '',\n              related: [],\n              parent: '',\n              props: {},\n              spread: spread,\n              simplifyNsLoading: this.simplifyNsLoading,\n              disabled: this.disabled,\n              disabledControls: this.disabledControls,\n              readonly: this.readonly,\n              readonlyControls: this.readonlyControls,\n              hidden: this.hidden,\n              hiddenControls: this.hiddenControls,\n              templates: this.templates,\n              previous: null,\n              next: null,\n              group: this.nucleon?.group ?? '',\n              lang: this.lang,\n              ns: this.ns,\n            })}\n          </div>\n        </button>\n\n        <div\n          class=${classMap({\n            'transition-colors mt-xs text-xs': true,\n            'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n            'text-secondary': 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 __handleFetchEvent(event: Event) {\n    if (!(event instanceof FetchEvent)) return;\n    if (event.defaultPrevented) return;\n\n    const { url, method } = event.request;\n\n    if (url === `foxy://${this.virtualHost}/select` && method === 'POST') {\n      return event.respondWith(this.__handleSelect(event.request));\n    }\n\n    if (url === `foxy://${this.virtualHost}/empty` && method === 'GET') {\n      return event.respondWith(this.__handleEmpty());\n    }\n  }\n\n  private async __handleEmpty(): Promise<Response> {\n    return new Response(\n      JSON.stringify({\n        _links: { self: { href: `foxy://${this.virtualHost}/empty` } },\n        message: 'Resource selected.',\n      })\n    );\n  }\n\n  private async __handleSelect(request: Request): Promise<Response> {\n    const body = (await request.clone().json()) as { selection: string };\n    this._value = body.selection;\n    return new Response(\n      JSON.stringify({\n        _links: { self: { href: `foxy://${this.virtualHost}/empty` } },\n        message: 'Resource selected.',\n      })\n    );\n  }\n}\n"]}

package/dist/elements/internal/InternalResourcePickerControl/InternalResourcePickerControlForm.d.ts

@@ -0,0 +1,14 @@
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { HALJSONResource, NucleonV8N } from '../../public/NucleonElement/types';
+import { InternalForm } from '../InternalForm/InternalForm';
+declare type Data = HALJSONResource & {
+    selection: string;
+    query: string;
+};
+export declare class InternalResourcePickerControlForm extends InternalForm<Data> {
+    static get properties(): PropertyDeclarations;
+    static get v8n(): NucleonV8N<Data>;
+    selectionProps: Record<PropertyKey, unknown>;
+    renderBody(): TemplateResult;
+}
+export {};

package/dist/elements/internal/InternalResourcePickerControl/InternalResourcePickerControlForm.js

@@ -0,0 +1,40 @@
+import { InternalForm } from "../InternalForm/InternalForm.js";
+import { spread } from '@open-wc/lit-helpers';
+import { html } from 'lit-html';
+export class InternalResourcePickerControlForm extends InternalForm {
+    constructor() {
+        super(...arguments);
+        this.selectionProps = {};
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            selectionProps: { attribute: false },
+        };
+    }
+    static get v8n() {
+        return [({ selection: v }) => (v === undefined ? 'silent:selection_required' : true)];
+    }
+    renderBody() {
+        return html `
+      <h2 class="leading-xs text-xxl font-medium break-all">
+        <foxy-i18n infer="" key="header"></foxy-i18n>
+      </h2>
+
+      <foxy-internal-async-list-control
+        infer="selection"
+        form="foxy-null"
+        hide-delete-button
+        hide-create-button
+        @itemclick=${(evt) => {
+            evt.preventDefault();
+            this.edit({ selection: evt.detail });
+            this.submit();
+        }}
+        ...=${spread(this.selectionProps)}
+      >
+      </foxy-internal-async-list-control>
+    `;
+    }
+}
+//# sourceMappingURL=InternalResourcePickerControlForm.js.map

package/dist/elements/internal/InternalResourcePickerControl/InternalResourcePickerControlForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalResourcePickerControlForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControlForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,wCAAqC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAIhC,MAAM,OAAO,iCAAkC,SAAQ,YAAkB;IAAzE;;QAYE,mBAAc,GAAiC,EAAE,CAAC;IAuBpD,CAAC;IAlCC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,cAAc,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SACrC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAG;QACZ,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACxF,CAAC;IAID,UAAU;QACR,OAAO,IAAI,CAAA;;;;;;;;;;qBAUM,CAAC,GAAwB,EAAE,EAAE;YACxC,GAAG,CAAC,cAAc,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC;YACrC,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;cACK,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC;;;KAGpC,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { HALJSONResource, NucleonV8N } from '../../public/NucleonElement/types';\n\nimport { InternalForm } from '../InternalForm/InternalForm';\nimport { spread } from '@open-wc/lit-helpers';\nimport { html } from 'lit-html';\n\ntype Data = HALJSONResource & { selection: string; query: string };\n\nexport class InternalResourcePickerControlForm extends InternalForm<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      selectionProps: { attribute: false },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [({ selection: v }) => (v === undefined ? 'silent:selection_required' : true)];\n  }\n\n  selectionProps: Record<PropertyKey, unknown> = {};\n\n  renderBody(): TemplateResult {\n    return html`\n      <h2 class=\"leading-xs text-xxl font-medium break-all\">\n        <foxy-i18n infer=\"\" key=\"header\"></foxy-i18n>\n      </h2>\n\n      <foxy-internal-async-list-control\n        infer=\"selection\"\n        form=\"foxy-null\"\n        hide-delete-button\n        hide-create-button\n        @itemclick=${(evt: CustomEvent<string>) => {\n          evt.preventDefault();\n          this.edit({ selection: evt.detail });\n          this.submit();\n        }}\n        ...=${spread(this.selectionProps)}\n      >\n      </foxy-internal-async-list-control>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,6 @@
+import '../InternalAsyncListControl/index';
+import '../InternalEditableControl/index';
+import '../InternalForm/index';
+import '../../public/FormDialog/index';
+import { InternalResourcePickerControl } from './InternalResourcePickerControl';
+export { InternalResourcePickerControl };

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

@@ -0,0 +1,10 @@
+import "../InternalAsyncListControl/index.js";
+import "../InternalEditableControl/index.js";
+import "../InternalForm/index.js";
+import "../../public/FormDialog/index.js";
+import { InternalResourcePickerControlForm } from "./InternalResourcePickerControlForm.js";
+import { InternalResourcePickerControl } from "./InternalResourcePickerControl.js";
+customElements.define('foxy-internal-resource-picker-control-form', InternalResourcePickerControlForm);
+customElements.define('foxy-internal-resource-picker-control', InternalResourcePickerControl);
+export { InternalResourcePickerControl };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalResourcePickerControl/index.ts"],"names":[],"mappings":"AAAA,8CAA2C;AAC3C,6CAA0C;AAC1C,kCAA+B;AAE/B,0CAAuC;AAEvC,OAAO,EAAE,iCAAiC,EAAE,+CAA4C;AACxF,OAAO,EAAE,6BAA6B,EAAE,2CAAwC;AAEhF,cAAc,CAAC,MAAM,CACnB,4CAA4C,EAC5C,iCAAiC,CAClC,CAAC;AAEF,cAAc,CAAC,MAAM,CAAC,uCAAuC,EAAE,6BAA6B,CAAC,CAAC;AAE9F,OAAO,EAAE,6BAA6B,EAAE,CAAC","sourcesContent":["import '../InternalAsyncListControl/index';\nimport '../InternalEditableControl/index';\nimport '../InternalForm/index';\n\nimport '../../public/FormDialog/index';\n\nimport { InternalResourcePickerControlForm } from './InternalResourcePickerControlForm';\nimport { InternalResourcePickerControl } from './InternalResourcePickerControl';\n\ncustomElements.define(\n  'foxy-internal-resource-picker-control-form',\n  InternalResourcePickerControlForm\n);\n\ncustomElements.define('foxy-internal-resource-picker-control', InternalResourcePickerControl);\n\nexport { InternalResourcePickerControl };\n"]}

package/dist/elements/public/CartForm/CartForm.js

@@ -265,87 +265,6 @@ export class CartForm extends Base {
                 currencyCode = (_h = (_g = /Currency: ([A-Z]{3})/g.exec(localeInfo)) === null || _g === void 0 ? void 0 : _g[1]) !== null && _h !== void 0 ? _h : null;
         }
         return html `
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__shippingRegionsHref)}
-        id=${this.__shippingRegionsLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__billingRegionsHref)}
-        id=${this.__billingRegionsLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__countriesHref)}
-        id=${this.__countriesHelperLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__customerHref)}
-        id=${this.__customerLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__discountsHref)}
-        id=${this.__discountsLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__defaultTemplateSetHref)}
-        id=${this.__defaultTemplateSetLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__localeCodesHelperHref)}
-        id=${this.__localeCodesHelperLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__templateSetHref)}
-        id=${this.__templateSetLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
-      <foxy-nucleon
-        class="hidden"
-        infer=""
-        href=${ifDefined(this.__storeHref)}
-        id=${this.__storeLoaderId}
-        @update=${() => this.requestUpdate()}
-      >
-      </foxy-nucleon>
-
       <div class="grid sm-grid-cols-2 gap-l">
         <div class="sm-col-span-2">
           <foxy-i18n class="text-l font-medium leading-s block" infer="" key="order_section_title">
@@ -550,6 +469,87 @@ export class CartForm extends Base {
             `
             : html `<foxy-internal-create-control infer="create"></foxy-internal-create-control>`}
       </div>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__shippingRegionsHref)}
+        id=${this.__shippingRegionsLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__billingRegionsHref)}
+        id=${this.__billingRegionsLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__countriesHref)}
+        id=${this.__countriesHelperLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__customerHref)}
+        id=${this.__customerLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__discountsHref)}
+        id=${this.__discountsLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__defaultTemplateSetHref)}
+        id=${this.__defaultTemplateSetLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__localeCodesHelperHref)}
+        id=${this.__localeCodesHelperLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__templateSetHref)}
+        id=${this.__templateSetLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__storeHref)}
+        id=${this.__storeLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
     `;
     }
     get __defaultTemplateSetHref() {