@foxy.io/elements 1.32.0-beta.1 → 1.32.0-beta.2

package/dist/cdn/{shared-dfe41029.js → shared-eff5dcb0.js}

@@ -1 +1 @@
-import{_ as e}from"./shared-d1195c27.js";import{y as s}from"./shared-b726120d.js";import{h as t}from"./shared-dc73b9a5.js";let r,a,i,o=e=>e;class d extends s{constructor(){super(...arguments),this.disabled=!1,this.items=[]}static get properties(){return e(e({},super.properties),{},{disabled:{type:Boolean,reflect:!0},items:{attribute:!1}})}render(){return t(r||(r=o` <p class="font-lumo text-xs leading-s text-secondary"> ${0} </p> `),this.items.map((({name:e,value:s},r)=>t(a||(a=o`${0}${0} ${0}`),0===r?"":t(i||(i=o`&bull;`)),e,s))))}}export{d as M};
+import{_ as e}from"./shared-d1195c27.js";import{y as s}from"./shared-4efc6bb8.js";import{h as t}from"./shared-dc73b9a5.js";let r,a,i,o=e=>e;class p extends s{constructor(){super(...arguments),this.disabled=!1,this.items=[]}static get properties(){return e(e({},super.properties),{},{disabled:{type:Boolean,reflect:!0},items:{attribute:!1}})}render(){return t(r||(r=o` <p class="font-lumo text-xs leading-s text-secondary"> ${0} </p> `),this.items.map((({name:e,value:s},r)=>t(a||(a=o`${0}${0} ${0}`),0===r?"":t(i||(i=o`&bull;`)),e,s))))}}export{p as M};

package/dist/cdn/{shared-913e1955.js → shared-f0d70be1.js}

@@ -1,4 +1,4 @@
-import"./shared-f998f9c8.js";import{O as e}from"./shared-40af05b3.js";import"./shared-9a59aab2.js";import{h as t,P as i,D as s,t as o,a as l,m as n,A as r,y as a,v as h,x as d}from"./shared-adcfd50a.js";import"./shared-8fc527b7.js";import{T as c,D as u,E as _}from"./shared-65479601.js";import{I as m}from"./shared-651c44fa.js";import"./shared-562d466d.js";import"./shared-8b5e05df.js";import{C as p}from"./shared-61ade33e.js";import{t as f,m as g,F as v,f as y,d as b,P as I,O as x,D as S,a as w}from"./shared-5513e830.js";import{I as P,a as C}from"./shared-f893763a.js";import{I as V}from"./shared-97cfdcdb.js";
+import"./shared-1cfea4b6.js";import{O as e}from"./shared-34c84b9f.js";import"./shared-906fe068.js";import{h as t,P as i,D as s,t as o,a as l,m as n,A as r,y as a,v as h,x as d}from"./shared-4d543043.js";import"./shared-011d6240.js";import{T as c,D as u,E as _}from"./shared-8a8bfd72.js";import{I as m}from"./shared-651c44fa.js";import"./shared-d8cd61ed.js";import"./shared-9e94c56d.js";import{C as p}from"./shared-61ade33e.js";import{t as f,m as g,F as v,f as y,d as b,P as I,O as x,D as S,a as w}from"./shared-e1850e5f.js";import{I as P,a as C}from"./shared-08e42e78.js";import{I as V}from"./shared-9de0a899.js";
 /**
 @license
 Copyright (c) 2017 The Polymer Project Authors. All rights reserved.

package/dist/cdn/{shared-91d8985f.js → shared-f97ed2ff.js}

@@ -1 +1 @@
-import"./shared-f998f9c8.js";const n=document.createElement("template");n.innerHTML='<dom-module id="lumo-overlay">\n  <template>\n    <style>\n      :host {\n        top: var(--lumo-space-m);\n        right: var(--lumo-space-m);\n        bottom: var(--lumo-space-m);\n        left: var(--lumo-space-m);\n        /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */\n        /* stylelint-disable-next-line */\n        outline: 0px solid transparent;\n      }\n\n      [part="overlay"] {\n        background-color: var(--lumo-base-color);\n        background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));\n        border-radius: var(--lumo-border-radius-m);\n        box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);\n        color: var(--lumo-body-text-color);\n        font-family: var(--lumo-font-family);\n        font-size: var(--lumo-font-size-m);\n        font-weight: 400;\n        line-height: var(--lumo-line-height-m);\n        letter-spacing: 0;\n        text-transform: none;\n        -webkit-text-size-adjust: 100%;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n\n      [part="content"] {\n        padding: var(--lumo-space-xs);\n      }\n\n      [part="backdrop"] {\n        background-color: var(--lumo-shade-20pct);\n        animation: 0.2s lumo-overlay-backdrop-enter both;\n        will-change: opacity;\n      }\n\n      @keyframes lumo-overlay-backdrop-enter {\n        0% {\n          opacity: 0;\n        }\n      }\n\n      :host([closing]) [part="backdrop"] {\n        animation: 0.2s lumo-overlay-backdrop-exit both;\n      }\n\n      @keyframes lumo-overlay-backdrop-exit {\n        100% {\n          opacity: 0;\n        }\n      }\n\n      @keyframes lumo-overlay-dummy-animation {\n        0% { opacity: 1; }\n        100% { opacity: 1; }\n      }\n    </style>\n  </template>\n</dom-module>',document.head.appendChild(n.content);
+import"./shared-1cfea4b6.js";const n=document.createElement("template");n.innerHTML='<dom-module id="lumo-overlay">\n  <template>\n    <style>\n      :host {\n        top: var(--lumo-space-m);\n        right: var(--lumo-space-m);\n        bottom: var(--lumo-space-m);\n        left: var(--lumo-space-m);\n        /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */\n        /* stylelint-disable-next-line */\n        outline: 0px solid transparent;\n      }\n\n      [part="overlay"] {\n        background-color: var(--lumo-base-color);\n        background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));\n        border-radius: var(--lumo-border-radius-m);\n        box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);\n        color: var(--lumo-body-text-color);\n        font-family: var(--lumo-font-family);\n        font-size: var(--lumo-font-size-m);\n        font-weight: 400;\n        line-height: var(--lumo-line-height-m);\n        letter-spacing: 0;\n        text-transform: none;\n        -webkit-text-size-adjust: 100%;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n\n      [part="content"] {\n        padding: var(--lumo-space-xs);\n      }\n\n      [part="backdrop"] {\n        background-color: var(--lumo-shade-20pct);\n        animation: 0.2s lumo-overlay-backdrop-enter both;\n        will-change: opacity;\n      }\n\n      @keyframes lumo-overlay-backdrop-enter {\n        0% {\n          opacity: 0;\n        }\n      }\n\n      :host([closing]) [part="backdrop"] {\n        animation: 0.2s lumo-overlay-backdrop-exit both;\n      }\n\n      @keyframes lumo-overlay-backdrop-exit {\n        100% {\n          opacity: 0;\n        }\n      }\n\n      @keyframes lumo-overlay-dummy-animation {\n        0% { opacity: 1; }\n        100% { opacity: 1; }\n      }\n    </style>\n  </template>\n</dom-module>',document.head.appendChild(n.content);

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

@@ -56,80 +56,91 @@
       "placeholder": "Synced with template set",
       "helper_text": ""
     },
-    "customer-uri": {
-      "label": "Customer",
-      "helper_text": "",
-      "value": "{{ resource.first_name }} {{ resource.last_name }} • {{ resource.email }}",
-      "value_busy": "Loading...",
-      "value_fail": "Failed to load",
+    "customer-email": {
+      "label": "Customer email",
       "placeholder": "Not set",
-      "dialog": {
-        "cancel": "Cancel",
-        "close": "Close",
-        "header": "Select an account",
-        "selection": {
-          "label": "Customers",
-          "helper_text": "",
-          "search": "Search",
-          "clear": "Clear",
-          "query-builder": {
-            "filter_is_anonymous": "Account type",
-            "filter_is_anonymous_value_false": "Registered",
-            "filter_is_anonymous_value_true": "Guest",
-            "filter_email": "Email",
-            "add_or_clause": "Add OR clause",
-            "add_value": "Add value",
-            "date": "{{value, date}}",
-            "delete": "Delete",
-            "field": "Field",
-            "hidden": "Hidden",
-            "is_defined_false": "Not defined",
-            "is_defined_true": "Defined",
-            "name": "Name",
-            "operator_equal": "Equal",
-            "operator_greaterthan": "Greater than",
-            "operator_greaterthanorequal": "Greater than or equal",
-            "operator_in": "One of",
-            "operator_isdefined": "Is defined",
-            "operator_lessthan": "Less than",
-            "operator_lessthanorequal": "Less than or equal",
-            "operator_not": "Not equal",
-            "or": "Or",
-            "query_builder_group": "Group of filters",
-            "query_builder_rule": "Filter",
-            "range_from": "From",
-            "range_to": "To",
-            "type": "Type",
-            "type_any": "Field of unknown type",
-            "type_attribute": "Key-value resource",
-            "type_date": "Date field",
-            "type_here": "Type here...",
-            "type_number": "Numeric field",
-            "type_string": "Text field",
-            "value": "Value"
-          },
-          "pagination": {
-            "search_button_text": "Search",
-            "first": "First",
-            "last": "Last",
-            "next": "Next",
-            "pagination": "{{from}}-{{to}} out of {{total}}",
-            "previous": "Previous",
-            "card": {
-              "spinner": {
-                "loading_busy": "Loading",
-                "loading_empty": "No customers found",
-                "loading_error": "Unknown error"
-              }
+      "helper_text": "Use this field to store the email for a customer who may not have an account yet."
+    }
+  },
+  "customer-uri": {
+    "label": "Customer",
+    "helper_text": "",
+    "clear": "Clear",
+    "view": "View",
+    "copy-id": {
+      "failed_to_copy": "Failed to copy",
+      "click_to_copy": "Copy ID",
+      "copying": "Copying...",
+      "done": "Copied"
+    },
+    "dialog": {
+      "cancel": "Cancel",
+      "close": "Close",
+      "header": "Select an account",
+      "selection": {
+        "label": "Customers",
+        "helper_text": "",
+        "search": "Search",
+        "clear": "Clear",
+        "query-builder": {
+          "filter_is_anonymous": "Account type",
+          "filter_is_anonymous_value_false": "Registered",
+          "filter_is_anonymous_value_true": "Guest",
+          "filter_email": "Email",
+          "add_or_clause": "Add OR clause",
+          "add_value": "Add value",
+          "date": "{{value, date}}",
+          "delete": "Delete",
+          "field": "Field",
+          "hidden": "Hidden",
+          "is_defined_false": "Not defined",
+          "is_defined_true": "Defined",
+          "name": "Name",
+          "operator_equal": "Equal",
+          "operator_greaterthan": "Greater than",
+          "operator_greaterthanorequal": "Greater than or equal",
+          "operator_in": "One of",
+          "operator_isdefined": "Is defined",
+          "operator_lessthan": "Less than",
+          "operator_lessthanorequal": "Less than or equal",
+          "operator_not": "Not equal",
+          "or": "Or",
+          "query_builder_group": "Group of filters",
+          "query_builder_rule": "Filter",
+          "range_from": "From",
+          "range_to": "To",
+          "type": "Type",
+          "type_any": "Field of unknown type",
+          "type_attribute": "Key-value resource",
+          "type_date": "Date field",
+          "type_here": "Type here...",
+          "type_number": "Numeric field",
+          "type_string": "Text field",
+          "value": "Value"
+        },
+        "pagination": {
+          "search_button_text": "Search",
+          "first": "First",
+          "last": "Last",
+          "next": "Next",
+          "pagination": "{{from}}-{{to}} out of {{total}}",
+          "previous": "Previous",
+          "card": {
+            "spinner": {
+              "loading_busy": "Loading",
+              "loading_empty": "No customers found",
+              "loading_error": "Unknown error"
             }
           }
         }
       }
     },
-    "customer-email": {
-      "label": "Customer email",
-      "placeholder": "Not set",
-      "helper_text": "Use this field to store the email for a customer who may not have an account yet."
+    "card": {
+      "spinner": {
+        "loading_busy": "Loading",
+        "loading_empty": "Not set – click to select",
+        "loading_error": "Unknown error"
+      }
     }
   },
   "billing": {

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

@@ -7,7 +7,9 @@ declare type DisplayValueOptionsCb = (resource: HALJSONResource) => Record<strin
 export declare class InternalResourcePickerControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
     getDisplayValueOptions: DisplayValueOptionsCb;
+    showCopyIdButton: boolean;
     virtualHost: string;
+    getItemUrl: ((href: string) => string) | null;
     formProps: Record<string, unknown>;
     filters: Option[];
     layout: 'summary-item' | 'standalone' | null;
@@ -17,6 +19,7 @@ export declare class InternalResourcePickerControl extends InternalEditableContr
     private readonly __getItemRenderer;
     renderControl(): TemplateResult;
     updated(changes: Map<keyof this, unknown>): void;
+    private __clear;
     private __renderSummaryItemLayout;
     private __renderStandaloneLayout;
     private __handleFetchEvent;

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

@@ -1,4 +1,5 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { getResourceId } from '@foxy.io/sdk/core';
 import { FetchEvent } from "../../public/NucleonElement/FetchEvent.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { html, svg } from 'lit-html';
@@ -10,7 +11,9 @@ export class InternalResourcePickerControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
         this.getDisplayValueOptions = resource => ({ resource });
+        this.showCopyIdButton = false;
         this.virtualHost = uniqueId('internal-resource-picker-control-');
+        this.getItemUrl = null;
         this.formProps = {};
         this.filters = [];
         this.layout = null;
@@ -33,7 +36,9 @@ export class InternalResourcePickerControl extends InternalEditableControl {
         return {
             ...super.properties,
             getDisplayValueOptions: { attribute: false },
+            showCopyIdButton: { type: Boolean, attribute: 'show-copy-id-button' },
             virtualHost: {},
+            getItemUrl: { attribute: false },
             formProps: { type: Object },
             filters: { type: Array },
             layout: {},
@@ -71,6 +76,10 @@ export class InternalResourcePickerControl extends InternalEditableControl {
         if (changes.has('item'))
             (_b = (_a = this.__getItemRenderer.cache).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
+    __clear() {
+        this._value = '';
+        this.dispatchEvent(new CustomEvent('clear'));
+    }
     __renderSummaryItemLayout() {
         const resource = this.renderRoot.querySelector('#value');
         const onClick = (evt) => {
@@ -131,10 +140,7 @@ export class InternalResourcePickerControl extends InternalEditableControl {
             style="width: 1em; height: 1em;"
             ?disabled=${this.disabled}
             ?hidden=${this.readonly || !this._value}
-            @click=${() => {
-            this._value = '';
-            this.dispatchEvent(new CustomEvent('clear'));
-        }}
+            @click=${this.__clear}
           >
             ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`}
           </button>
@@ -151,29 +157,58 @@ export class InternalResourcePickerControl extends InternalEditableControl {
     `;
     }
     __renderStandaloneLayout() {
-        var _a, _b;
+        var _a, _b, _c;
+        const selectionUrl = typeof this._value === 'string' ? (_a = this.getItemUrl) === null || _a === void 0 ? void 0 : _a.call(this, this._value) : void 0;
+        const selectionId = typeof this._value === 'string' ? getResourceId(this._value) : void 0;
         return html `
       <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,
+            'flex items-center gap-m transition-colors mb-s font-medium text-l': true,
             'text-disabled': this.disabled,
         })}
         >
-          ${this.label}
+          <span class="mr-auto">${this.label}</span>
+          ${selectionUrl
+            ? html `
+                <a
+                  class="text-body rounded transition-opacity hover-opacity-90 focus-outline-none focus-ring-2 focus-ring-primary-50"
+                  href=${selectionUrl}
+                >
+                  <foxy-i18n infer="" key="view"></foxy-i18n>
+                </a>
+              `
+            : ''}
+          ${this.showCopyIdButton && selectionId !== null
+            ? html `
+                <foxy-copy-to-clipboard
+                  layout="text"
+                  theme="contrast tertiary-inline"
+                  infer="copy-id"
+                  text=${selectionId}
+                >
+                </foxy-copy-to-clipboard>
+              `
+            : ''}
+          ${this.readonly || !this._value
+            ? ''
+            : html `
+                <vaadin-button
+                  theme="error tertiary-inline"
+                  ?disabled=${this.disabled}
+                  @click=${this.__clear}
+                >
+                  <foxy-i18n infer="" key="clear"></foxy-i18n>
+                </vaadin-button>
+              `}
         </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,
+            'block w-full bg-contrast-5 rounded text-left transition-colors': true,
             'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+            'cursor-pointer hover-bg-contrast-10': !this.disabled && !this.readonly,
+            'cursor-default': this.disabled || this.readonly,
         })}
           style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
           ?disabled=${this.disabled || this.readonly}
@@ -203,7 +238,7 @@ export class InternalResourcePickerControl extends InternalEditableControl {
             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 : '',
+            group: (_c = (_b = this.nucleon) === null || _b === void 0 ? void 0 : _b.group) !== null && _c !== void 0 ? _c : '',
             lang: this.lang,
             ns: this.ns,
         })}

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

@@ -1 +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 { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport type { FormRenderer } from '../../public/FormDialog/types';\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 { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\nimport { uniqueId } from 'lodash-es';\nimport { spread } from '@open-wc/lit-helpers';\n\nimport memoize from 'lodash-es/memoize';\n\ntype DisplayValueOptionsCb = (resource: HALJSONResource) => Record<string, unknown>;\n\nexport class InternalResourcePickerControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      getDisplayValueOptions: { attribute: false },\n      virtualHost: {},\n      formProps: { type: Object },\n      filters: { type: Array },\n      layout: {},\n      first: {},\n      item: {},\n      form: {},\n    };\n  }\n\n  getDisplayValueOptions: DisplayValueOptionsCb = resource => ({ resource });\n\n  virtualHost = uniqueId('internal-resource-picker-control-');\n\n  formProps: Record<string, unknown> = {};\n\n  filters: Option[] = [];\n\n  layout: 'summary-item' | 'standalone' | null = null;\n\n  first: string | null = null;\n\n  item: string | null = null;\n\n  form: string | null | FormRenderer = 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    const dialogProps = {\n      ...this.formProps,\n      '.selectionProps': { '.filters': this.filters, '.first': this.first, '.item': this.item },\n    };\n\n    return html`\n      <foxy-form-dialog\n        parent=\"foxy://${this.virtualHost}/select\"\n        header=\"header\"\n        infer=\"dialog\"\n        alert\n        .props=${dialogProps}\n        .form=${this.form ?? 'foxy-internal-resource-picker-control-form'}\n        @fetch=${this.__handleFetchEvent}\n      >\n      </foxy-form-dialog>\n\n      ${this.layout === 'summary-item'\n        ? this.__renderSummaryItemLayout()\n        : this.__renderStandaloneLayout()}\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 __renderSummaryItemLayout() {\n    const resource = this.renderRoot.querySelector<NucleonElement<any>>('#value');\n    const onClick = (evt: Event) => {\n      if (this.disabled || this.readonly) return;\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    return html`\n      <div class=\"flex items-start leading-xs gap-m\">\n        <div class=\"flex-1\">\n          <div class=\"text-m text-body whitespace-nowrap\">${this.label}</div>\n          <div class=\"text-s text-secondary\">${this.helperText}</div>\n          <div class=\"text-s text-error\" ?hidden=${this.disabled || this.readonly}>\n            ${this._errorMessage}\n          </div>\n        </div>\n\n        <div class=\"flex items-center gap-xs\">\n          <button\n            aria-label=${this.t('select')}\n            class=${classMap({\n              'text-right min-w-0 transition-colors transition-opacity': true,\n              'rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n              'text-secondary': this.readonly,\n              'text-disabled': this.disabled,\n              'cursor-pointer text-body hover-opacity-80': !this.disabled && !this.readonly,\n              'font-medium': !this.readonly,\n            })}\n            ?disabled=${this.disabled || this.readonly}\n            @click=${onClick}\n          >\n            <div class=\"truncate min-w-0\">\n              ${this._value\n                ? html`\n                    <foxy-i18n\n                      infer=\"\"\n                      key=\"value\"\n                      .options=${resource?.data\n                        ? this.getDisplayValueOptions(resource.data)\n                        : { context: resource?.in('fail') ? 'fail' : 'busy' }}\n                    >\n                    </foxy-i18n>\n                  `\n                : this.placeholder}\n            </div>\n          </button>\n\n          <button\n            aria-label=${this.t('clear')}\n            class=${classMap({\n              'rounded-full transition-colors': true,\n              'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n              'cursor-pointer text-tertiary hover-text-body': !this.disabled,\n              'cursor-default text-disabled': this.disabled,\n            })}\n            style=\"width: 1em; height: 1em;\"\n            ?disabled=${this.disabled}\n            ?hidden=${this.readonly || !this._value}\n            @click=${() => {\n              this._value = '';\n              this.dispatchEvent(new CustomEvent('clear'));\n            }}\n          >\n            ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em\"><path d=\"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" /></svg>`}\n          </button>\n        </div>\n      </div>\n\n      <foxy-nucleon\n        infer=\"\"\n        href=${ifDefined(this._value || void 0)}\n        id=\"value\"\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n    `;\n  }\n\n  private __renderStandaloneLayout() {\n    return html`\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  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 __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  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"]}
+{"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 { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport type { FormRenderer } from '../../public/FormDialog/types';\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 { getResourceId } from '@foxy.io/sdk/core';\nimport { FetchEvent } from '../../public/NucleonElement/FetchEvent';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\nimport { uniqueId } from 'lodash-es';\nimport { spread } from '@open-wc/lit-helpers';\n\nimport memoize from 'lodash-es/memoize';\n\ntype DisplayValueOptionsCb = (resource: HALJSONResource) => Record<string, unknown>;\n\nexport class InternalResourcePickerControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      getDisplayValueOptions: { attribute: false },\n      showCopyIdButton: { type: Boolean, attribute: 'show-copy-id-button' },\n      virtualHost: {},\n      getItemUrl: { attribute: false },\n      formProps: { type: Object },\n      filters: { type: Array },\n      layout: {},\n      first: {},\n      item: {},\n      form: {},\n    };\n  }\n\n  getDisplayValueOptions: DisplayValueOptionsCb = resource => ({ resource });\n\n  showCopyIdButton = false;\n\n  virtualHost = uniqueId('internal-resource-picker-control-');\n\n  getItemUrl: ((href: string) => string) | null = null;\n\n  formProps: Record<string, unknown> = {};\n\n  filters: Option[] = [];\n\n  layout: 'summary-item' | 'standalone' | null = null;\n\n  first: string | null = null;\n\n  item: string | null = null;\n\n  form: string | null | FormRenderer = 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    const dialogProps = {\n      ...this.formProps,\n      '.selectionProps': { '.filters': this.filters, '.first': this.first, '.item': this.item },\n    };\n\n    return html`\n      <foxy-form-dialog\n        parent=\"foxy://${this.virtualHost}/select\"\n        header=\"header\"\n        infer=\"dialog\"\n        alert\n        .props=${dialogProps}\n        .form=${this.form ?? 'foxy-internal-resource-picker-control-form'}\n        @fetch=${this.__handleFetchEvent}\n      >\n      </foxy-form-dialog>\n\n      ${this.layout === 'summary-item'\n        ? this.__renderSummaryItemLayout()\n        : this.__renderStandaloneLayout()}\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 __clear(): void {\n    this._value = '';\n    this.dispatchEvent(new CustomEvent('clear'));\n  }\n\n  private __renderSummaryItemLayout() {\n    const resource = this.renderRoot.querySelector<NucleonElement<any>>('#value');\n    const onClick = (evt: Event) => {\n      if (this.disabled || this.readonly) return;\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    return html`\n      <div class=\"flex items-start leading-xs gap-m\">\n        <div class=\"flex-1\">\n          <div class=\"text-m text-body whitespace-nowrap\">${this.label}</div>\n          <div class=\"text-s text-secondary\">${this.helperText}</div>\n          <div class=\"text-s text-error\" ?hidden=${this.disabled || this.readonly}>\n            ${this._errorMessage}\n          </div>\n        </div>\n\n        <div class=\"flex items-center gap-xs\">\n          <button\n            aria-label=${this.t('select')}\n            class=${classMap({\n              'text-right min-w-0 transition-colors transition-opacity': true,\n              'rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n              'text-secondary': this.readonly,\n              'text-disabled': this.disabled,\n              'cursor-pointer text-body hover-opacity-80': !this.disabled && !this.readonly,\n              'font-medium': !this.readonly,\n            })}\n            ?disabled=${this.disabled || this.readonly}\n            @click=${onClick}\n          >\n            <div class=\"truncate min-w-0\">\n              ${this._value\n                ? html`\n                    <foxy-i18n\n                      infer=\"\"\n                      key=\"value\"\n                      .options=${resource?.data\n                        ? this.getDisplayValueOptions(resource.data)\n                        : { context: resource?.in('fail') ? 'fail' : 'busy' }}\n                    >\n                    </foxy-i18n>\n                  `\n                : this.placeholder}\n            </div>\n          </button>\n\n          <button\n            aria-label=${this.t('clear')}\n            class=${classMap({\n              'rounded-full transition-colors': true,\n              'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n              'cursor-pointer text-tertiary hover-text-body': !this.disabled,\n              'cursor-default text-disabled': this.disabled,\n            })}\n            style=\"width: 1em; height: 1em;\"\n            ?disabled=${this.disabled}\n            ?hidden=${this.readonly || !this._value}\n            @click=${this.__clear}\n          >\n            ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em\"><path d=\"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" /></svg>`}\n          </button>\n        </div>\n      </div>\n\n      <foxy-nucleon\n        infer=\"\"\n        href=${ifDefined(this._value || void 0)}\n        id=\"value\"\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n    `;\n  }\n\n  private __renderStandaloneLayout() {\n    const selectionUrl = typeof this._value === 'string' ? this.getItemUrl?.(this._value) : void 0;\n    const selectionId = typeof this._value === 'string' ? getResourceId(this._value) : void 0;\n\n    return html`\n      <div class=\"block group\">\n        <div\n          class=${classMap({\n            'flex items-center gap-m transition-colors mb-s font-medium text-l': true,\n            'text-disabled': this.disabled,\n          })}\n        >\n          <span class=\"mr-auto\">${this.label}</span>\n          ${selectionUrl\n            ? html`\n                <a\n                  class=\"text-body rounded transition-opacity hover-opacity-90 focus-outline-none focus-ring-2 focus-ring-primary-50\"\n                  href=${selectionUrl}\n                >\n                  <foxy-i18n infer=\"\" key=\"view\"></foxy-i18n>\n                </a>\n              `\n            : ''}\n          ${this.showCopyIdButton && selectionId !== null\n            ? html`\n                <foxy-copy-to-clipboard\n                  layout=\"text\"\n                  theme=\"contrast tertiary-inline\"\n                  infer=\"copy-id\"\n                  text=${selectionId}\n                >\n                </foxy-copy-to-clipboard>\n              `\n            : ''}\n          ${this.readonly || !this._value\n            ? ''\n            : html`\n                <vaadin-button\n                  theme=\"error tertiary-inline\"\n                  ?disabled=${this.disabled}\n                  @click=${this.__clear}\n                >\n                  <foxy-i18n infer=\"\" key=\"clear\"></foxy-i18n>\n                </vaadin-button>\n              `}\n        </div>\n\n        <button\n          class=${classMap({\n            'block w-full bg-contrast-5 rounded text-left transition-colors': true,\n            'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n            'cursor-pointer hover-bg-contrast-10': !this.disabled && !this.readonly,\n            'cursor-default': this.disabled || this.readonly,\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  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 __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  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"]}

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

@@ -1,6 +1,8 @@
+import '@vaadin/vaadin-button';
 import '../InternalAsyncListControl/index';
 import '../InternalEditableControl/index';
 import '../InternalForm/index';
+import '../../public/CopyToClipboard/index';
 import '../../public/NucleonElement/index';
 import '../../public/FormDialog/index';
 import '../../public/I18n/index';

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

@@ -1,6 +1,8 @@
+import '@vaadin/vaadin-button';
 import "../InternalAsyncListControl/index.js";
 import "../InternalEditableControl/index.js";
 import "../InternalForm/index.js";
+import "../../public/CopyToClipboard/index.js";
 import "../../public/NucleonElement/index.js";
 import "../../public/FormDialog/index.js";
 import "../../public/I18n/index.js";

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

@@ -1 +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,8CAA2C;AAC3C,0CAAuC;AACvC,oCAAiC;AAEjC,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/NucleonElement/index';\nimport '../../public/FormDialog/index';\nimport '../../public/I18n/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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalResourcePickerControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,8CAA2C;AAC3C,6CAA0C;AAC1C,kCAA+B;AAE/B,+CAA4C;AAC5C,8CAA2C;AAC3C,0CAAuC;AACvC,oCAAiC;AAEjC,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 '@vaadin/vaadin-button';\n\nimport '../InternalAsyncListControl/index';\nimport '../InternalEditableControl/index';\nimport '../InternalForm/index';\n\nimport '../../public/CopyToClipboard/index';\nimport '../../public/NucleonElement/index';\nimport '../../public/FormDialog/index';\nimport '../../public/I18n/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.d.ts

@@ -18,6 +18,8 @@ export declare class CartForm extends Base<Data> {
     static get v8n(): NucleonV8N<Data>;
     /** Payment Card Embed configuration URL. The form will append template set parameter on its own. */
     paymentCardEmbedUrl: string | null;
+    /** When configured, Customer section will include a link generated by this function. */
+    getCustomerPageUrl: ((id: string) => string) | null;
     /** URL of the `fx:item_categories` collection for the store. */
     itemCategories: string | null;
     /** URL of the `fx:template_sets` collection for the store. */

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

@@ -18,6 +18,8 @@ export class CartForm extends Base {
         super(...arguments);
         /** Payment Card Embed configuration URL. The form will append template set parameter on its own. */
         this.paymentCardEmbedUrl = null;
+        /** When configured, Customer section will include a link generated by this function. */
+        this.getCustomerPageUrl = null;
         /** URL of the `fx:item_categories` collection for the store. */
         this.itemCategories = null;
         /** URL of the `fx:template_sets` collection for the store. */
@@ -118,6 +120,7 @@ export class CartForm extends Base {
         return {
             ...super.properties,
             paymentCardEmbedUrl: { attribute: 'payment-card-embed-url' },
+            getCustomerPageUrl: { attribute: false },
             itemCategories: { attribute: 'item-categories' },
             templateSets: { attribute: 'template-sets' },
             localeCodes: { attribute: 'locale-codes' },
@@ -197,16 +200,6 @@ export class CartForm extends Base {
         >
         </foxy-internal-select-control>
 
-        <foxy-internal-resource-picker-control
-          layout="summary-item"
-          first=${ifDefined((_c = this.customers) !== null && _c !== void 0 ? _c : void 0)}
-          infer="customer-uri"
-          item="foxy-customer-card"
-          .setValue=${this.__customerUriSetValue}
-          .filters=${this.__customerUriOptions}
-        >
-        </foxy-internal-resource-picker-control>
-
         <foxy-internal-text-control layout="summary-item" infer="customer-email">
         </foxy-internal-text-control>
       </foxy-internal-summary-control>
@@ -224,7 +217,7 @@ export class CartForm extends Base {
         .formProps=${{
             'item-categories': this.itemCategories,
             'locale-codes': this.localeCodes,
-            'store': (_d = this.data) === null || _d === void 0 ? void 0 : _d._links['fx:store'].href,
+            'store': (_c = this.data) === null || _c === void 0 ? void 0 : _c._links['fx:store'].href,
         }}
       >
       </foxy-internal-async-list-control>
@@ -243,6 +236,17 @@ export class CartForm extends Base {
       >
       </foxy-internal-async-list-control>
 
+      <foxy-internal-resource-picker-control
+        first=${ifDefined((_d = this.customers) !== null && _d !== void 0 ? _d : void 0)}
+        infer="customer-uri"
+        item="foxy-customer-card"
+        show-copy-id-button
+        .getItemUrl=${this.getCustomerPageUrl}
+        .setValue=${this.__customerUriSetValue}
+        .filters=${this.__customerUriOptions}
+      >
+      </foxy-internal-resource-picker-control>
+
       <foxy-internal-summary-control infer="billing">
         <foxy-internal-resource-picker-control
           placeholder=${this.__paymentMethodUriPlaceholder}