@foxy.io/elements 1.18.0-beta.12 → 1.18.0-beta.14

package/dist/cdn/translations/template-set-form/en.json

@@ -0,0 +1,384 @@
+{
+  "description": {
+    "label": "Description",
+    "placeholder": "Required - e.g. My Template Set",
+    "helper_text": "",
+    "v8n_required": "Please enter a description for this set",
+    "v8n_too_long": "Please reduce this description to 100 characters or less"
+  },
+  "code": {
+    "label": "Code",
+    "placeholder": "Required - e.g. MY-TEMPLATE-SET",
+    "helper_text": "",
+    "v8n_required": "Please enter a code for this set",
+    "v8n_too_long": "Please reduce this code to 50 characters or less"
+  },
+  "cart-template-uri": {
+    "template": "Template",
+    "cache": "Cache",
+    "cancel": "Cancel",
+    "default": "Default",
+    "description": "Description",
+    "template_clipboard": "From clipboard",
+    "template_clipboard_explainer": "Paste the template here to use it",
+    "template_default": "Default",
+    "template_default_explainer": "Use the default template",
+    "template_url": "From URL",
+    "template_url_explainer": "Fetch the template from a public URL",
+    "spinner": {
+      "loading_busy": "Loading",
+      "loading_error": "Failed to load"
+    }
+  },
+  "cart-include-template-uri": {
+    "template": "Template",
+    "cache": "Cache",
+    "cancel": "Cancel",
+    "default": "Default",
+    "description": "Description",
+    "template_clipboard": "From clipboard",
+    "template_clipboard_explainer": "Paste the template here to use it",
+    "template_default": "Default",
+    "template_default_explainer": "Use the default template",
+    "template_url": "From URL",
+    "template_url_explainer": "Fetch the template from a public URL",
+    "spinner": {
+      "loading_busy": "Loading",
+      "loading_error": "Failed to load"
+    }
+  },
+  "checkout-template-uri": {
+    "template": "Template",
+    "cache": "Cache",
+    "cancel": "Cancel",
+    "default": "Default",
+    "description": "Description",
+    "template_clipboard": "From clipboard",
+    "template_clipboard_explainer": "Paste the template here to use it",
+    "template_default": "Default",
+    "template_default_explainer": "Use the default template",
+    "template_url": "From URL",
+    "template_url_explainer": "Fetch the template from a public URL",
+    "spinner": {
+      "loading_busy": "Loading",
+      "loading_error": "Failed to load"
+    }
+  },
+  "receipt-template-uri": {
+    "template": "Template",
+    "cache": "Cache",
+    "cancel": "Cancel",
+    "default": "Default",
+    "description": "Description",
+    "template_clipboard": "From clipboard",
+    "template_clipboard_explainer": "Paste the template here to use it",
+    "template_default": "Default",
+    "template_default_explainer": "Use the default template",
+    "template_url": "From URL",
+    "template_url_explainer": "Fetch the template from a public URL",
+    "spinner": {
+      "loading_busy": "Loading",
+      "loading_error": "Failed to load"
+    }
+  },
+  "email-template-uri": {
+    "cache": "Cache",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "default": "Default",
+    "html_template": "HTML template",
+    "template_clipboard": "From clipboard",
+    "template_clipboard_explainer": "Paste the template here to use it",
+    "template_default": "Default",
+    "template_default_explainer": "Use the default template",
+    "template_url": "From URL",
+    "template_url_explainer": "Fetch the template from a public URL",
+    "text_template": "Text template",
+    "template-language": {
+      "label": "Language",
+      "placeholder": "Default (Nunjucks)",
+      "helper_text": ""
+    },
+    "spinner": {
+      "loading_busy": "Loading",
+      "loading_error": "Failed to load"
+    }
+  },
+  "language": {
+    "label": "Language",
+    "placeholder": "Select language",
+    "helper_text": "",
+    "v8n_required": "Please select a language for this set"
+  },
+  "locale-code": {
+    "label": "Locale",
+    "placeholder": "Select locale",
+    "helper_text": "",
+    "v8n_required": "Please select a locale for this set"
+  },
+  "header_general": "General",
+  "config": {
+    "payment-method-set-uri": {
+      "is-live": {
+        "label": "",
+        "option_live": "Use live credentials",
+        "helper_text": ""
+      },
+      "is-purchase-order-enabled": {
+        "label": "",
+        "option_true": "Allow purchase orders",
+        "helper_text": ""
+      },
+      "payment-methods": {
+        "delete_header": "Remove payment method",
+        "delete_message": "Are you sure you'd like to remove this payment method? You'll need to configure it again if you decide to bring it back.",
+        "delete_confirm": "Remove",
+        "delete_cancel": "Cancel",
+        "title": "Payment methods",
+        "dialog": {
+          "header_update": "Payment method",
+          "header_create": "New payment method",
+          "close": "Close",
+          "cancel": "Cancel",
+          "save": "Save",
+          "undo_header": "Unsaved changes",
+          "undo_message": "Looks like you didn't save your changes! What would you like to do with them?",
+          "undo_cancel": "Review",
+          "undo_confirm": "Discard"
+        },
+        "pagination": {
+          "create_button_text": "Add payment method",
+          "card": {
+            "delete_button_text": "Remove"
+          }
+        }
+      },
+      "fraud-protections": {
+        "delete_header": "Remove fraud protection",
+        "delete_message": "Are you sure you'd like to remove this fraud protection? You'll need to configure it again if you decide to bring it back.",
+        "delete_confirm": "Remove",
+        "delete_cancel": "Cancel",
+        "title": "Fraud protections",
+        "dialog": {
+          "header_update": "Fraud protection",
+          "header_create": "New fraud protection",
+          "close": "Close",
+          "cancel": "Cancel",
+          "save": "Save",
+          "undo_header": "Unsaved changes",
+          "undo_message": "Looks like you didn't save your changes! What would you like to do with them?",
+          "undo_cancel": "Review",
+          "undo_confirm": "Discard"
+        },
+        "pagination": {
+          "create_button_text": "Add fraud protection",
+          "card": {
+            "delete_button_text": "Remove"
+          }
+        }
+      },
+      "spinner": {
+        "loading_busy": "Loading",
+        "loading_error": "Failed to load"
+      }
+    },
+    "template-dialog": {
+      "cart_template_uri_header": "Cart template",
+      "cart_include_template_uri_header": "Cart include template",
+      "checkout_template_uri_header": "Checkout template",
+      "receipt_template_uri_header": "Web receipt template",
+      "email_template_uri_header": "Email receipt template",
+      "close": "Close",
+      "cancel": "Cancel",
+      "save": "Save",
+      "undo_header": "Unsaved changes",
+      "undo_message": "Looks like you didn't save your changes! What would you like to do with them?",
+      "undo_cancel": "Review",
+      "undo_confirm": "Discard"
+    },
+    "templates_title": "Templates",
+    "templates_helper_text": "Click any of the templates above to customize how those views are presented to your customers. Warning: this functionality is for advanced users only.",
+    "cart-template-uri": {
+      "title": "Cart template",
+      "type_custom_url": "Custom (URL)",
+      "type_custom_text": "Custom (Text)",
+      "type_default": "Default",
+      "spinner": {
+        "loading_busy": "Loading cart template",
+        "loading_empty": "No cart template",
+        "loading_error": "Failed to load cart template"
+      }
+    },
+    "cart-include-template-uri": {
+      "title": "Cart include template",
+      "type_custom_url": "Custom (URL)",
+      "type_custom_text": "Custom (Text)",
+      "type_default": "Default",
+      "spinner": {
+        "loading_busy": "Loading cart include template",
+        "loading_empty": "No cart include template",
+        "loading_error": "Failed to load cart include template"
+      }
+    },
+    "checkout-template-uri": {
+      "title": "Checkout template",
+      "type_custom_url": "Custom (URL)",
+      "type_custom_text": "Custom (Text)",
+      "type_default": "Default",
+      "spinner": {
+        "loading_busy": "Loading checkout template",
+        "loading_empty": "No checkout template",
+        "loading_error": "Failed to load checkout template"
+      }
+    },
+    "receipt-template-uri": {
+      "title": "Web receipt template",
+      "type_custom_url": "Custom (URL)",
+      "type_custom_text": "Custom (Text)",
+      "type_default": "Default",
+      "spinner": {
+        "loading_busy": "Loading web receipt template",
+        "loading_empty": "No web receipt template",
+        "loading_error": "Failed to load web receipt template"
+      }
+    },
+    "email-template-uri": {
+      "title": "Email receipt template",
+      "type_custom_url": "Custom (URL)",
+      "type_custom_text": "Custom (Text)",
+      "type_mixed": "Mixed",
+      "type_default": "Default",
+      "spinner": {
+        "loading_busy": "Loading email receipt template",
+        "loading_empty": "No email receipt template",
+        "loading_error": "Failed to load email receipt template"
+      }
+    },
+    "add_country": "Add country",
+    "add_field": "Add field",
+    "add_region": "Add region",
+    "address1": "Address Line 1",
+    "address2": "Address Line 2",
+    "allow": "Allow",
+    "allowlist": "Allow all except",
+    "billing": "Billing",
+    "block": "Block",
+    "blocklist": "Ban all except",
+    "cart_controls": "Quantity",
+    "cart_type": "Cart display",
+    "cart_type_custom": "Custom",
+    "cart_type_custom_explainer": "Build your own JSONP cart with included config",
+    "cart_type_default": "Sidecart",
+    "cart_type_default_explainer": "Default cart appearance in version 2.0",
+    "cart_type_fullpage": "Full page",
+    "cart_type_fullpage_explainer": "Send all customers to a full page cart while still including minicart functionality",
+    "checked_by_default": "Checked by default",
+    "checkout_type": "Accounts",
+    "checkout_type_account_only": "Allow customer accounts only",
+    "checkout_type_default_account": "Allow both, default to customer",
+    "checkout_type_default_guest": "Allow both, default to guest",
+    "checkout_type_guest_only": "Allow guests only",
+    "checkout_type_helper_text": "If you select Allow guests only, your store will not be able to use subscriptions.",
+    "city": "City",
+    "close": "Close",
+    "close_icon": "Close icon",
+    "company": "Company",
+    "consent": "Consent",
+    "copy": "Copy",
+    "country": "Country",
+    "coupon_entry": "Coupon code",
+    "create": "Create",
+    "custom_config": "Custom config",
+    "custom_config_helper_text": "If you have any custom values you'd like to make available to your twig template, you can add them here as a valid JSON string.",
+    "custom_fields": "Custom fields",
+    "custom_fields_helper_text": "If you have information you'd like to collect from the customer on the checkout page, you can add custom form fields here which will be added to the checkout form. We recommend you follow the same HTML container structure used on other checkout fields for consistency. You can use Twig syntax here.",
+    "custom_footer": "Custom footer",
+    "custom_footer_helper_text": "Any JS snippets or conversion scripts you need to add to the footer can be put here and will be inserted before the </body> tag. You can use Twig syntax here. For conversion scripts you only want to display once on the receipt page, use {% if first_receipt_display %} {# conversion script content here #} {% endif %}.",
+    "custom_header": "Custom header",
+    "custom_header_helper_text": "Any CSS or JS you need to add to the header can be put here and will be inserted before the </head> tag of your templates. Keep in mind all script file references must be through https or run through the Foxy caching system. Twig syntax is not available in the header.",
+    "default": "Default",
+    "delete": "Delete",
+    "delete_prompt": "This resource will be permanently removed. Are you sure?",
+    "disabled": "Disabled",
+    "display_sdta": "Display a Secure Data Transfer agreement to EU customers",
+    "display_sdta_explainer": "If you have customers in the European Union, enable this feature so they can opt in to sending their data to our secure servers in the United States.",
+    "display_tos_link": "Display a link to Terms & Conditions",
+    "display_tos_link_explainer": "Include a checkbox to ask your customers to agree to your Terms of Service.",
+    "enable_postcode_lookup": "Offer city and state suggestions based on postcode",
+    "enabled": "Enabled",
+    "error": "Error",
+    "field_plural": "Fields",
+    "first_name": "First name",
+    "foxycomplete": "Location autocomplete",
+    "foxycomplete_combobox": "Combo Box",
+    "foxycomplete_combobox_explainer": "Expand to browse options, type to search",
+    "foxycomplete_disabled": "Disabled",
+    "foxycomplete_disabled_explainer": "Let customers pick an option from a list",
+    "foxycomplete_search": "Search",
+    "foxycomplete_search_explainer": "Display a «search as you type» field",
+    "ga_account_id": "Account ID",
+    "ga_account_id_explainer": "You can find the ID in the Admin section of your Analytics in Tracking info > Tracking code.",
+    "ga_include_on_site": "Include via loader.js",
+    "ga_include_on_site_explainer": "Enable Google Analytics on any page where the loader.js file is included.",
+    "hidden": "Hidden",
+    "hidden_fields": "Hidden fields",
+    "last_name": "Last name",
+    "location_plural": "Locations",
+    "location_url": "Location (URL)",
+    "newsletter_subscribe": "Allow users to sign up for your newsletter",
+    "newsletter_subscribe_explainer": "This includes a checkbox on your checkout to allow customers to choose to sign up to your newsletter, available in the transaction reports, the API and webhooks.",
+    "open_icon": "Open icon",
+    "optional": "Optional",
+    "phone": "Phone",
+    "postal_code": "Postal code",
+    "product_category": "Product category",
+    "product_code": "Product code",
+    "product_options": "Product options",
+    "product_weight": "Product weight",
+    "region": "Region",
+    "require_consent": "Require consent to proceed",
+    "required": "Required",
+    "same_as_shipping": "Same as shipping",
+    "shipping": "Shipping",
+    "show_country_flags": "Show country flags",
+    "sio_account_id": "Write Key",
+    "sio_account_id_explainer": "You can find the write key in your project set up guide or in the source’s settings.",
+    "skip_csc_for_saved": "Skip CSC for saved cards",
+    "skip_csc_for_sso": "Skip CSC for single sign-on",
+    "sub_enddate": "Subscription end date",
+    "sub_frequency": "Subscription frequency",
+    "sub_nextdate": "Subscription next date",
+    "sub_startdate": "Subscription start date",
+    "supported_cards": "Cards",
+    "supported_cards_disclaimer": "Applies only to payment gateways where the customer enters their payment card information directly on the Foxy checkout. Exceptions: Adyen Embedded, Amazon Pay, Apple Pay, Klarna, Square and Stripe.",
+    "tab_advanced": "Advanced",
+    "tab_analytics": "Analytics",
+    "tab_cart": "Cart",
+    "tab_checkout": "Checkout",
+    "tax_id": "Tax ID",
+    "troubleshooting": "Troubleshooting",
+    "troubleshooting_debug": "Log debug messages in the browser console",
+    "troubleshooting_debug_explainer": "Enable this option to trigger console.log() calls for our JS, which can assist with troubleshooting your store.",
+    "spinner": {
+      "loading_busy": "Loading",
+      "loading_error": "Failed to load"
+    }
+  },
+  "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 template set? You won't be able to bring it back."
+  },
+  "create": {
+    "create": "Create"
+  },
+  "spinner": {
+    "loading_busy": "Loading",
+    "loading_error": "Failed to load"
+  }
+}

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

@@ -18,6 +18,7 @@ export declare class InternalAsyncComboBoxControl extends InternalEditableContro
     selectedItem: ComboBoxItem | string | undefined;
     /** URL of the first page of the hAPI collection serving as a source for items. */
     first: string | null;
+    private __dataProvider;
     renderControl(): TemplateResult;
     updated(changes: Map<keyof this, unknown>): void;
     protected get _value(): string;

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

@@ -19,19 +19,7 @@ export class InternalAsyncComboBoxControl extends InternalEditableControl {
         this.selectedItem = undefined;
         /** 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' },
-            selectedItem: { attribute: false },
-            first: { type: String },
-        };
-    }
-    renderControl() {
-        var _a, _b;
-        const dataProvider = async (params, callback) => {
+        this.__dataProvider = async (params, callback) => {
             if (!this.first)
                 return callback([], 0);
             const url = new URL(this.first);
@@ -47,6 +35,18 @@ export class InternalAsyncComboBoxControl extends InternalEditableControl {
             const items = Array.from(Object.values(json._embedded))[0];
             callback(items, json.total_items);
         };
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            itemLabelPath: { type: String, attribute: 'item-label-path' },
+            itemValuePath: { type: String, attribute: 'item-value-path' },
+            selectedItem: { attribute: false },
+            first: { type: String },
+        };
+    }
+    renderControl() {
+        var _a, _b;
         return html `
       <vaadin-combo-box
         item-value-path=${ifDefined((_a = this.itemValuePath) !== null && _a !== void 0 ? _a : undefined)}
@@ -61,7 +61,7 @@ export class InternalAsyncComboBoxControl extends InternalEditableControl {
         ?readonly=${this.readonly}
         clear-button-visible
         .checkValidity=${this._checkValidity}
-        .dataProvider=${dataProvider}
+        .dataProvider=${this.__dataProvider}
         .selectedItem=${this.selectedItem}
         .value=${this._value}
         @change=${(evt) => {
@@ -82,7 +82,7 @@ export class InternalAsyncComboBoxControl extends InternalEditableControl {
     }
     updated(changes) {
         super.updated(changes);
-        if (changes.has('first')) {
+        if (changes.has('first') || changes.has('itemLabelPath')) {
             const comboBox = this.renderRoot.querySelector('vaadin-combo-box');
             // this forces reload
             if (comboBox) {

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

@@ -1 +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, ComboBoxItem } 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      selectedItem: { attribute: false },\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  selectedItem: ComboBoxItem | string | undefined = undefined;\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        clear-button-visible\n        .checkValidity=${this._checkValidity}\n        .dataProvider=${dataProvider}\n        .selectedItem=${this.selectedItem}\n        .value=${this._value}\n        @change=${(evt: CustomEvent) => {\n          evt.stopPropagation();\n\n          const comboBox = evt.currentTarget as ComboBoxElement;\n          this._value = comboBox.value;\n\n          if (this._value === comboBox.value) {\n            this.selectedItem = comboBox.selectedItem;\n            this.dispatchEvent(new CustomEvent('selected-item-changed'));\n          } else {\n            comboBox.value = this._value;\n          }\n        }}\n      >\n      </vaadin-combo-box>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n\n    if (changes.has('first')) {\n      const comboBox = this.renderRoot.querySelector<ComboBoxElement>('vaadin-combo-box');\n\n      // this forces reload\n      if (comboBox) {\n        comboBox.size = 0;\n        comboBox.size = 1;\n      }\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"]}
+{"version":3,"file":"InternalAsyncComboBoxControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncComboBoxControl/InternalAsyncComboBoxControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ComboBoxDataProvider, ComboBoxElement, ComboBoxItem } 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      selectedItem: { attribute: false },\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  selectedItem: ComboBoxItem | string | undefined = undefined;\n\n  /** URL of the first page of the hAPI collection serving as a source for items. */\n  first: string | null = null;\n\n  private __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  renderControl(): TemplateResult {\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        clear-button-visible\n        .checkValidity=${this._checkValidity}\n        .dataProvider=${this.__dataProvider}\n        .selectedItem=${this.selectedItem}\n        .value=${this._value}\n        @change=${(evt: CustomEvent) => {\n          evt.stopPropagation();\n\n          const comboBox = evt.currentTarget as ComboBoxElement;\n          this._value = comboBox.value;\n\n          if (this._value === comboBox.value) {\n            this.selectedItem = comboBox.selectedItem;\n            this.dispatchEvent(new CustomEvent('selected-item-changed'));\n          } else {\n            comboBox.value = this._value;\n          }\n        }}\n      >\n      </vaadin-combo-box>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n\n    if (changes.has('first') || changes.has('itemLabelPath')) {\n      const comboBox = this.renderRoot.querySelector<ComboBoxElement>('vaadin-combo-box');\n\n      // this forces reload\n      if (comboBox) {\n        comboBox.size = 0;\n        comboBox.size = 1;\n      }\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/InternalEditableListControl/InternalEditableListControl.d.ts

@@ -0,0 +1,11 @@
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { Item, Option } from './types';
+import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+export declare class InternalEditableListControl extends InternalEditableControl {
+    static get properties(): PropertyDeclarations;
+    options: Option[];
+    private __newItem;
+    render(): TemplateResult;
+    protected get _value(): Item[];
+    protected set _value(newValue: Item[]);
+}

package/dist/elements/internal/InternalEditableListControl/InternalEditableListControl.js

@@ -0,0 +1,143 @@
+import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { classMap } from "../../../utils/class-map.js";
+import { repeat } from 'lit-html/directives/repeat';
+import { live } from 'lit-html/directives/live';
+import { html } from 'lit-element';
+export class InternalEditableListControl extends InternalEditableControl {
+    constructor() {
+        super(...arguments);
+        this.options = [];
+        this.__newItem = '';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            options: { type: Array },
+            __newItem: { attribute: false },
+        };
+    }
+    render() {
+        const deleteButtonClass = classMap({
+            'w-xs h-xs mr-xs rounded-full transition-colors flex-shrink-0': true,
+            'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,
+            'text-tertiary hover-bg-error-10 hover-text-error': !this.disabled,
+            'cursor-default text-disabled': this.disabled,
+            'flex items-center justify-center': !this.readonly,
+            'hidden': this.readonly,
+        });
+        const itemClass = classMap({
+            'transition-colors h-m ml-s flex items-center': true,
+            'text-secondary': this.readonly,
+            'text-disabled': this.disabled,
+        });
+        const isAddButtonDisabled = this.disabled || !this.__newItem;
+        const addItem = () => {
+            if (!this.__newItem)
+                return;
+            this._value = [...this._value, { value: this.__newItem }];
+            this.__newItem = '';
+        };
+        return html `
+      <div class="group">
+        <div
+          class="transition-colors mb-xs font-medium text-s text-secondary group-hover-text-body"
+        >
+          ${this.label}
+        </div>
+
+        <div
+          class="border border-contrast-10 rounded transition-colors group-hover-border-contrast-20"
+        >
+          <ol
+            class="transition-colors divide-y divide-contrast-10 font-medium group-hover-divide-contrast-20"
+          >
+            ${repeat(this._value, item => item.value, (item, index) => {
+            var _a;
+            return html `
+                  <li class=${itemClass}>
+                    <div class="flex-1 mr-s">${(_a = item.label) !== null && _a !== void 0 ? _a : item.value}</div>
+
+                    <button
+                      aria-label=${this.t('delete')}
+                      class=${deleteButtonClass}
+                      ?disabled=${this.disabled}
+                      @click=${() => {
+                this._value = this._value.filter((_, i) => i !== index);
+            }}
+                    >
+                      <iron-icon icon="lumo:cross" class="icon-inline text-xl"></iron-icon>
+                    </button>
+                  </li>
+                `;
+        })}
+          </ol>
+
+          <div
+            style=${this._value.length === 0
+            ? 'border-radius: calc(var(--lumo-border-radius-m) - 1px)'
+            : 'border-radius: 0 0 calc(var(--lumo-border-radius-m) - 1px) calc(var(--lumo-border-radius-m) - 1px)'}
+            class=${classMap({
+            'transition-colors bg-contrast-10 pl-s h-m flex items-center': true,
+            'focus-within-ring-2 focus-within-ring-primary-50': true,
+            'group-hover-bg-contrast-20': true,
+            'flex': !this.readonly,
+            'hidden': this.readonly,
+        })}
+          >
+            <input
+              placeholder=${this.placeholder}
+              class="w-full bg-transparent appearance-none h-m font-medium focus-outline-none"
+              list="list"
+              .value=${live(this.__newItem)}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
+              @keydown=${(evt) => evt.key === 'Enter' && addItem()}
+              @change=${(evt) => evt.stopPropagation()}
+              @input=${(evt) => {
+            this.__newItem = evt.currentTarget.value.trim();
+        }}
+            />
+
+            <datalist id="list">
+              ${this.options.map(({ label, value }) => {
+            if (this._value.some(item => item.value === value))
+                return;
+            return html `<option value=${value}>${label !== null && label !== void 0 ? label : value}</option>`;
+        })}
+            </datalist>
+
+            <div class="transition-opacity ${this.__newItem ? 'opacity-100' : 'opacity-0'}">
+              <button
+                aria-label=${this.t('submit')}
+                class=${classMap({
+            'w-xs h-xs mr-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none': true,
+            'flex items-center justify-center rounded-full transition-colors': true,
+            'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,
+            'bg-success-10 text-success cursor-pointer': !isAddButtonDisabled,
+            'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,
+            'focus-ring-2': !isAddButtonDisabled,
+        })}
+                ?disabled=${isAddButtonDisabled}
+                @click=${addItem}
+              >
+                <iron-icon icon="lumo:plus" class="icon-inline text-l"></iron-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="transition-colors mt-xs text-xs text-secondary group-hover-text-body">
+          ${this.helperText}
+        </div>
+      </div>
+    `;
+    }
+    get _value() {
+        var _a;
+        return ((_a = super._value) !== null && _a !== void 0 ? _a : []);
+    }
+    set _value(newValue) {
+        super._value = newValue;
+    }
+}
+//# sourceMappingURL=InternalEditableListControl.js.map