@foxy.io/elements 1.18.0-beta.17 → 1.18.0-beta.19

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

@@ -24,8 +24,8 @@
   "repeat_quantity_percentage_discount_summary": "{{adjustment, percent}} on each {{from, ordinal}} item",
   "single_price_amount_discount_summary": "{{adjustment}}¤ after {{from}}",
   "single_price_percentage_discount_summary": "{{adjustment, percent}} after {{from}}",
-  "single_quantity_amount_discount_summary": "{{adjustment}}¤ after {{from}} items",
-  "single_quantity_percentage_discount_summary": "{{adjustment, percent}} after {{from}} items",
+  "single_quantity_amount_discount_summary": "{{adjustment}}¤ after {{from}} item(s)",
+  "single_quantity_percentage_discount_summary": "{{adjustment, percent}} after {{from}} item(s)",
   "uses_count": "{{count}} uses",
   "uses_to_total_count": "{{count}}/{{total}} uses",
   "spinner": {

package/dist/cdn/translations/customer-portal/en.json

@@ -116,11 +116,11 @@
       "loading_error": "Failed to load"
     },
     "subscription-card": {
-      "daily": "Daily",
-      "daily_plural": "Every {{count}} days",
+      "daily": "/ day",
+      "daily_plural": "/ {{count}} days",
       "frequency": "$t(customer.subscription-card.{{units}}, { \"count\": {{count}}, \"ns\": \"customer-portal\" })",
-      "monthly": "Monthly",
-      "monthly_plural": "Every {{count}} months",
+      "monthly": "/ month",
+      "monthly_plural": "/ {{count}} months",
       "price_recurring": "{{amount, price}} $t(customer.subscription-card.frequency, { \"count\": \"{{count}}\", \"units\": \"{{units}}\", \"ns\": \"customer-portal\" })",
       "price_twice_a_month": "{{amount, price}} $t(customer.subscription-card.twice_a_month, { \"ns\": \"customer-portal\" })",
       "subscription_active": "Next payment on {{date, date}}",
@@ -129,11 +129,11 @@
       "subscription_inactive": "Inactive",
       "subscription_will_be_cancelled": "Ends on {{date, date}}",
       "transaction_summary": "{{most_expensive_item.name}}",
-      "twice_a_month": "Twice a month",
-      "weekly": "Weekly",
-      "weekly_plural": "Every {{count}} weeks",
-      "yearly": "Yearly",
-      "yearly_plural": "Every {{count}} years",
+      "twice_a_month": "twice a month",
+      "weekly": "/ week",
+      "weekly_plural": "/ {{count}} weeks",
+      "yearly": "/ year",
+      "yearly_plural": "/ {{count}} years",
       "spinner": {
         "loading_busy": "Loading",
         "loading_empty": "No subscriptions",

package/dist/cdn/translations/email-template-card/en.json

@@ -1,5 +1,5 @@
 {
-  "title": "Email receipt template",
+  "title": "{{ description }}",
   "type_custom_url": "Custom (URL)",
   "type_custom_text": "Custom (HTML)",
   "type_mixed": "Mixed",

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

@@ -20,6 +20,7 @@
   "monthly": "Monthly",
   "monthly_plural": "Every {{count}} months",
   "next_transaction_date": "Next transaction date",
+  "start_date": "Start date",
   "price_recurring": "{{amount, price}} $t(frequency, { \"count\": \"{{count}}\", \"units\": \"{{units}}\", \"ns\": \"subscription-form\" })",
   "price_twice_a_month": "{{amount, price}} $t(twice_a_month, { \"ns\": \"subscription-form\" })",
   "subscription_active": "Next payment on {{date, date}}",
@@ -37,6 +38,117 @@
   "weekly_plural": "Every {{count}} weeks",
   "yearly": "Yearly",
   "yearly_plural": "Every {{count}} years",
+  "past-due-amount": {
+    "label": "Past due amount",
+    "placeholder": "",
+    "helper_text": "If a subscription payment is missed, this amount will be increased by that payment. The next time the subscription runs, it may be charged automatically depending on your store's subscription settings."
+  },
+  "attributes": {
+    "label": "Attributes",
+    "delete_confirm": "Delete",
+    "delete_cancel": "Cancel",
+    "delete_message": "Are you sure you'd like to remove this attribute? You won't be able to bring it back.",
+    "delete_header": "Delete attribute?",
+    "pagination": {
+      "create_button_text": "Add attribute",
+      "first": "First",
+      "last": "Last",
+      "next": "Next",
+      "pagination": "{{from}}-{{to}} out of {{total}}",
+      "previous": "Previous",
+      "card": {
+        "delete_button_text": "Remove",
+        "spinner": {
+          "loading_busy": "Loading",
+          "loading_empty": "No attributes",
+          "loading_error": "Failed to load"
+        }
+      }
+    },
+    "dialog": {
+      "close": "Close",
+      "header_update": "Attribute",
+      "header_create": "New attribute",
+      "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",
+      "cancel": "Cancel",
+      "confirm": "Confirm",
+      "create": "Create",
+      "date": "{{value, date}}",
+      "date_created": "Created on",
+      "date_modified": "Last updated",
+      "delete": "Delete",
+      "delete_prompt": "This attribute will be permanently removed. Are you sure?",
+      "name": "Name",
+      "v8n_required": "Required",
+      "v8n_too_long": "Too long",
+      "value": "Value",
+      "visibility": "Visibility",
+      "visibility_private": "Only me",
+      "visibility_public": "Everyone",
+      "visibility_restricted": "Store admins",
+      "spinner": {
+        "loading_busy": "Loading",
+        "loading_error": "Failed to load"
+      }
+    }
+  },
+  "items": {
+    "pagination": {
+      "first": "First",
+      "last": "Last",
+      "next": "Next",
+      "pagination": "{{from}}-{{to}} out of {{total}}",
+      "previous": "Previous",
+      "card": {
+        "price": "{{amount, price}}",
+        "wgt": "WGT",
+        "spinner": {
+          "loading_busy": "Loading",
+          "loading_empty": "No items",
+          "loading_error": "Failed to load"
+        }
+      }
+    }
+  },
+  "transactions": {
+    "label": "Transactions",
+    "pagination": {
+      "first": "First",
+      "last": "Last",
+      "next": "Next",
+      "pagination": "{{from}}-{{to}} out of {{total}}",
+      "previous": "Previous",
+      "card": {
+        "code": "Code",
+        "customer": "Customer",
+        "description": "Description",
+        "price": "{{amount, price}}",
+        "time": "{{value, date}}",
+        "transaction_approved": "Approved",
+        "transaction_authorized": "Authorized",
+        "transaction_captured": "Captured",
+        "transaction_completed": "Completed",
+        "transaction_declined": "Declined",
+        "transaction_pending": "Pending",
+        "transaction_plural": "Transactions",
+        "transaction_refunded": "Refunded",
+        "transaction_rejected": "Rejected",
+        "transaction_summary": "{{most_expensive_item.name}}",
+        "transaction_summary_plural": "{{most_expensive_item.name}} and {{count}} more",
+        "transaction_verified": "Verified",
+        "transaction_voided": "Voided",
+        "spinner": {
+          "loading_busy": "Loading",
+          "loading_empty": "No transactions",
+          "loading_error": "Failed to load"
+        }
+      }
+    }
+  },
   "cancellation-form": {
     "end_date": "End date",
     "end_subscription": "End subscription",
@@ -51,26 +163,9 @@
     "loading_busy": "Loading",
     "loading_error": "Failed to load"
   },
-  "transactions-table": {
-    "date": "{{value, date}}",
-    "price": "{{amount, price}}",
-    "receipt": "Receipt",
-    "transaction_approved": "Approved",
-    "transaction_authorized": "Authorized",
-    "transaction_captured": "Captured",
-    "transaction_completed": "Completed",
-    "transaction_declined": "Declined",
-    "transaction_pending": "Pending",
-    "transaction_refunded": "Refunded",
-    "transaction_rejected": "Rejected",
-    "transaction_summary": "{{most_expensive_item.name}}",
-    "transaction_summary_plural": "{{most_expensive_item.name}} and {{count}} more",
-    "transaction_verified": "Verified",
-    "transaction_voided": "Voided",
-    "spinner": {
-      "loading_busy": "Loading",
-      "loading_empty": "No data",
-      "loading_error": "Failed to load"
-    }
+  "timestamps": {
+    "date_created": "Created on",
+    "date_modified": "Last updated",
+    "date": "{{value, date}}"
   }
 }

package/dist/cdn/translations/subscription-settings-form/en.json

@@ -0,0 +1,92 @@
+{
+  "day": "{{ count }} day",
+  "day_plural": "{{ count }} days",
+  "day_suffix": "day",
+  "day_suffix_plural": "days",
+  "modification-url": {
+    "label": "Modification URL",
+    "placeholder": "https://example.com/edit-subscription",
+    "helper_text": "Enter a full URL or a path to the page under your Store URL where customers can modify their subscription. If present, subscriptions in the Customer Portal will show an Edit link that will send subscribers to this page."
+  },
+  "past-due-amount-handling": {
+    "label": "Past due amount value",
+    "option_increment": "Contains the sum of all missed payments",
+    "option_replace": "Contains the last missed payment amount",
+    "option_ignore": "Doesn't change",
+    "helper_text": "This setting determines how you'd like to handle past due amounts when we try to process a subscription and that subscritpion fails."
+  },
+  "automatically-charge-past-due-amount": {
+    "label": "",
+    "option_checked": "Charge past due amount with subscription payment",
+    "helper_text": ""
+  },
+  "clear-past-due-amounts-on-success": {
+    "label": "",
+    "option_checked": "Clear past due amount on successful payment",
+    "helper_text": ""
+  },
+  "reset-nextdate-on-makeup-payment": {
+    "label": "",
+    "option_checked": "Reset next transaction date on make-up payment",
+    "helper_text": ""
+  },
+  "reattempt-schedule": {
+    "label": "Reattempt schedule",
+    "placeholder": "Period in days, e.g. 14",
+    "helper_text": "",
+    "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
+  },
+  "reminder-email-schedule": {
+    "label": "Failed subscription payment email schedule",
+    "placeholder": "Period in days, e.g. 14",
+    "helper_text": "Number of days after the initial failure that an email notification to the customer should be sent. This only happens for active subscriptions which still have a past due amount. If a reattempt is successful, no additional reminder email will be sent.",
+    "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
+  },
+  "expiring-soon-payment-reminder-schedule": {
+    "label": "Payment method expiration email schedule",
+    "placeholder": "Period in days, e.g. 14",
+    "helper_text": "Number of days until the payment card expires that an email notification should be sent to the customer. This only happens for customers with active subscriptions.",
+    "v8n_too_long": "This schedule is too large. Please reduce the number of entries."
+  },
+  "cancellation-schedule": {
+    "label": "Cancel failed subscriptions after",
+    "placeholder": "Don't cancel",
+    "helper_text": "A single number representing the number of days after the initial failure that a subscription should be set to cancel (assuming a successful payment hasn't been made in the meantime)."
+  },
+  "send-email-receipts-for-automated-billing": {
+    "label": "",
+    "option_checked": "Send email receipts for automated billing",
+    "helper_text": ""
+  },
+  "reattempt-bypass": {
+    "label": "Reattempt behavior",
+    "helper_text": "Determines whether Foxy should reattempt the subscription charge if the transaction's previous error string does or doesn't contain specific text.",
+    "option_reattempt_if_exists": "Reattempt on certain errors",
+    "option_skip_if_exists": "Skip on certain errors",
+    "option_always_reattempt": "Always reattempt",
+    "option_never_reattempt": "Never reattempt",
+    "reattempt-bypass-strings": {
+      "label": "",
+      "placeholder": "Add errors...",
+      "helper_text": "",
+      "v8n_too_long": "This list is too large. Please reduce the number of entries."
+    }
+  },
+  "timestamps": {
+    "date_created": "Created on",
+    "date_modified": "Last updated",
+    "date": "{{value, date}}"
+  },
+  "spinner": {
+    "loading_busy": "Loading",
+    "loading_error": "Failed to load"
+  },
+  "delete": {
+    "delete": "Delete",
+    "cancel": "Cancel",
+    "delete_prompt": "Are you sure you'd like to remove these subscription settings? You won't be able to bring them back."
+  },
+  "create": {
+    "create": "Create"
+  }
+}

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

@@ -11,6 +11,8 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
  */
 export declare class InternalAsyncComboBoxControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
+    /** Same as `allowCustomValue` property of Vaadin's `ComboBoxElement`. */
+    allowCustomValue: boolean;
     /** Same as `itemLabelPath` property of Vaadin's `ComboBoxElement`. */
     itemLabelPath: string | null;
     /** Same as `itemValuePath` property of Vaadin's `ComboBoxElement`. */

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

@@ -12,6 +12,8 @@ import { API } from "../../public/NucleonElement/API.js";
 export class InternalAsyncComboBoxControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        /** Same as `allowCustomValue` property of Vaadin's `ComboBoxElement`. */
+        this.allowCustomValue = false;
         /** Same as `itemLabelPath` property of Vaadin's `ComboBoxElement`. */
         this.itemLabelPath = null;
         /** Same as `itemValuePath` property of Vaadin's `ComboBoxElement`. */
@@ -39,6 +41,7 @@ export class InternalAsyncComboBoxControl extends InternalEditableControl {
     static get properties() {
         return {
             ...super.properties,
+            allowCustomValue: { type: Boolean, attribute: 'allow-custom-value' },
             itemLabelPath: { type: String, attribute: 'item-label-path' },
             itemValuePath: { type: String, attribute: 'item-value-path' },
             selectedItem: { attribute: false },
@@ -57,6 +60,7 @@ export class InternalAsyncComboBoxControl extends InternalEditableControl {
         placeholder=${this.placeholder}
         label=${this.label}
         class="w-full"
+        ?allow-custom-value=${this.allowCustomValue}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
         clear-button-visible

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  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"]}
+{"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      allowCustomValue: { type: Boolean, attribute: 'allow-custom-value' },\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 `allowCustomValue` property of Vaadin's `ComboBoxElement`. */\n  allowCustomValue = false;\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        ?allow-custom-value=${this.allowCustomValue}\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/InternalAsyncListControl/InternalAsyncListControl.d.ts

@@ -1,8 +1,8 @@
 import type { PropertyDeclarations, TemplateResult } from 'lit-element';
 import type { CollectionPage } from '../../public';
 import type { FormDialog } from '../../index';
-import { InternalControl } from '../InternalControl/InternalControl';
-export declare class InternalAsyncListControl extends InternalControl {
+import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
+export declare class InternalAsyncListControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
     /** Same as the `related` property of `NucleonElement`. */
     related: string[];
@@ -23,7 +23,7 @@ export declare class InternalAsyncListControl extends InternalControl {
     /** Hides Create button if true. */
     hideCreateButton: boolean;
     /** If set, renders list items as <a> tags. */
-    getPageHref: ((itemHref: string) => string) | null;
+    getPageHref: ((itemHref: string, item: unknown) => string) | null;
     private __deletionConfimationCallback;
     private __cachedCardRenderer;
     private __itemRenderer;

package/dist/elements/internal/InternalAsyncListControl/InternalAsyncListControl.js

@@ -1,7 +1,7 @@
-import { InternalControl } from "../InternalControl/InternalControl.js";
+import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
 import { classMap } from "../../../utils/class-map.js";
 import { html } from 'lit-element';
-export class InternalAsyncListControl extends InternalControl {
+export class InternalAsyncListControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
         /** Same as the `related` property of `NucleonElement`. */
@@ -33,8 +33,8 @@ export class InternalAsyncListControl extends InternalControl {
             const card = this.__cardRenderer(ctx);
             let clickableItem;
             const wrapperClass = classMap({
-                'rounded-t-l': !ctx.previous,
-                'rounded-b-l': !ctx.next,
+                'rounded-t': !ctx.previous,
+                'rounded-b': !ctx.next,
                 'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,
                 'text-left w-full block transition-colors': true,
                 'hover-bg-contrast-5': !isDisabled,
@@ -44,7 +44,7 @@ export class InternalAsyncListControl extends InternalControl {
                     clickableItem = html `<div class=${wrapperClass}>${card}</div>`;
                 }
                 else {
-                    const href = this.getPageHref(ctx.href);
+                    const href = this.getPageHref(ctx.href, ctx.data);
                     clickableItem = html `<a class=${wrapperClass} href=${href}>${card}</a>`;
                 }
             }
@@ -68,7 +68,7 @@ export class InternalAsyncListControl extends InternalControl {
 
         <vaadin-button
           theme="primary error"
-          class="h-full rounded-t-l rounded-b-l"
+          class="h-full"
           slot="action"
           @click=${(evt) => {
                 const button = evt.currentTarget;
@@ -149,10 +149,13 @@ export class InternalAsyncListControl extends InternalControl {
                 `}
           `
             : ''}
+      ${this.label && this.label !== 'label'
+            ? html `<div class="font-medium text-secondary text-s mb-xs">${this.label}</div>`
+            : ''}
 
       <foxy-pagination first=${first} infer="pagination">
         <foxy-collection-page
-          class="mb-s block divide-y divide-contrast-5 rounded-t-l rounded-b-l overflow-hidden bg-contrast-5"
+          class="mb-s block divide-y divide-contrast-5 rounded overflow-hidden bg-contrast-5"
           infer="card"
           .related=${this.related}
           .item=${this.__itemRenderer}
@@ -163,7 +166,7 @@ export class InternalAsyncListControl extends InternalControl {
             ? ''
             : html `
               <vaadin-button
-                class="mb-s bg-success-10 w-full rounded-t-l rounded-b-l"
+                class="mb-s w-full"
                 theme="success"
                 ?disabled=${this.disabled}
                 @click=${(evt) => {
@@ -177,7 +180,6 @@ export class InternalAsyncListControl extends InternalControl {
             }}
               >
                 <foxy-i18n infer="" key="create_button_text"></foxy-i18n>
-                <iron-icon class="icon-inline" icon="icons:add"></iron-icon>
               </vaadin-button>
             `}
       </foxy-pagination>
@@ -192,7 +194,7 @@ export class InternalAsyncListControl extends InternalControl {
             this.__cachedCardRenderer = {
                 item: this.item,
                 render: typeof this.item === 'string'
-                    ? new Function('ctx', `return ctx.html\`<${this.item} related=\${JSON.stringify(ctx.related)} parent=\${ctx.parent} class="p-m" infer href=\${ctx.href}></${this.item}>\``)
+                    ? new Function('ctx', `return ctx.html\`<${this.item} related=\${JSON.stringify(ctx.related)} parent=\${ctx.parent} style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)" infer href=\${ctx.href}></${this.item}>\``)
                     : this.item,
             };
         }

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

@@ -1 +1 @@
-{"version":3,"file":"InternalAsyncListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,8CAA2C;AACrE,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,MAAM,OAAO,wBAAyB,SAAQ,eAAe;IAA7D;;QAiBE,0DAA0D;QAC1D,YAAO,GAAG,EAAc,CAAC;QAEzB,yDAAyD;QACzD,UAAK,GAAG,EAAE,CAAC;QAEX,+DAA+D;QAC/D,UAAK,GAAG,EAAE,CAAC;QAEX,6FAA6F;QAC7F,SAAI,GAAuB,EAAE,CAAC;QAE9B,uDAAuD;QACvD,SAAI,GAAgC,EAAE,CAAC;QAEvC,mDAAmD;QACnD,SAAI,GAAG,KAAK,CAAC;QAEb,oDAAoD;QACpD,UAAK,GAAG,KAAK,CAAC;QAEd,yCAAyC;QACzC,qBAAgB,GAAG,KAAK,CAAC;QAEzB,mCAAmC;QACnC,qBAAgB,GAAG,KAAK,CAAC;QAEzB,8CAA8C;QAC9C,gBAAW,GAA0C,IAAI,CAAC;QAElD,kCAA6B,GAAwB,IAAI,CAAC;QAE1D,yBAAoB,GAGjB,IAAI,CAAC;QAER,mBAAc,GAAiB,GAAG,CAAC,EAAE;YAC3C,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI;gBAAE,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;YAEnF,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YAC/D,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;YACtC,IAAI,aAA6B,CAAC;YAElC,MAAM,YAAY,GAAG,QAAQ,CAAC;gBAC5B,aAAa,EAAE,CAAC,GAAG,CAAC,QAAQ;gBAC5B,aAAa,EAAE,CAAC,GAAG,CAAC,IAAI;gBACxB,wEAAwE,EAAE,IAAI;gBAC9E,0CAA0C,EAAE,IAAI;gBAChD,qBAAqB,EAAE,CAAC,UAAU;aACnC,CAAC,CAAC;YAEH,IAAI,IAAI,CAAC,WAAW,EAAE;gBACpB,IAAI,UAAU,EAAE;oBACd,aAAa,GAAG,IAAI,CAAA,cAAc,YAAY,IAAI,IAAI,QAAQ,CAAC;iBAChE;qBAAM;oBACL,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBACxC,aAAa,GAAG,IAAI,CAAA,YAAY,YAAY,SAAS,IAAI,IAAI,IAAI,MAAM,CAAC;iBACzE;aACF;iBAAM;gBACL,MAAM,WAAW,GAAG,CAAC,GAAU,EAAE,EAAE;oBACjC,MAAM,MAAM,GAAG,GAAG,CAAC,aAAkC,CAAC;oBACtD,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;oBAE7B,MAAM,CAAC,MAAM,GAAG,eAAe,CAAC;oBAChC,MAAM,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;oBACvB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBACtB,CAAC,CAAC;gBAEF,aAAa,GAAG,IAAI,CAAA;4BACE,UAAU,UAAU,YAAY,WAAW,WAAW,IAAI,IAAI;OACnF,CAAC;aACH;YAED,IAAI,IAAI,CAAC,gBAAgB;gBAAE,OAAO,aAAa,CAAC;YAEhD,OAAO,IAAI,CAAA;;UAEL,aAAa;;;;;;mBAMJ,CAAC,GAAgB,EAAE,EAAE;gBAC5B,MAAM,MAAM,GAAG,GAAG,CAAC,aAA4B,CAAC;gBAChD,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAA0B,CAAC;gBAEnF,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAErB,IAAI,CAAC,6BAA6B,GAAG,GAAG,EAAE;oBACxC,MAAM,UAAU,GAAG,MAAM,CAAC,sBAAuB,CAAC;oBAClD,MAAM,IAAI,GAAG,UAAU,CAAC,aAAa,CAAsB,QAAQ,CAAC,CAAC;oBAErE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,GAAG;oBACf,IAAI,CAAC,6BAA6B,GAAG,IAAI,CAAC;gBAC5C,CAAC,CAAC;YACJ,CAAC;;;;;KAKN,CAAC;QACJ,CAAC,CAAC;IAwGJ,CAAC;IA/NC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,gBAAgB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE;YACpE,gBAAgB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE;YACpE,WAAW,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;YACjC,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YACvB,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SACzB,CAAC;IACJ,CAAC;IA2GD,aAAa;QACX,IAAI,KAAa,CAAC;QAElB,IAAI;YACF,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAChC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;YAClD,KAAK,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;SACxB;QAAC,WAAM;YACN,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;SACpB;QAED,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAA;;uBAES,KAAK;;;sBAGN,IAAI,CAAC,IAAI;uBACR,IAAI,CAAC,KAAK;yBACR,IAAI,CAAC,OAAO;sBACf,IAAI,CAAC,IAAW;;;;cAIxB,IAAI,CAAC,gBAAgB;gBACrB,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,IAAI,CAAA;;;;;;;2BAOO,IAAI,CAAC,IAAI;yBACX,IAAI,CAAC,EAAE;;4BAEJ,CAAC,GAAoB,EAAE,EAAE;;oBAC/B,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS;wBAAE,MAAA,IAAI,CAAC,6BAA6B,+CAAlC,IAAI,EAAmC;gBACpE,CAAC;;;iBAGJ;WACN;YACH,CAAC,CAAC,EAAE;;+BAEmB,KAAK;;;;qBAIf,IAAI,CAAC,OAAO;kBACf,IAAI,CAAC,cAAqB;;;;UAIlC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB;YACpD,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,IAAI,CAAA;;;;4BAIY,IAAI,CAAC,QAAQ;yBAChB,CAAC,GAAU,EAAE,EAAE;gBACtB,GAAG,CAAC,cAAc,EAAE,CAAC;gBACrB,GAAG,CAAC,eAAe,EAAE,CAAC;gBAEtB,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC;gBAC7B,MAAM,MAAM,GAAG,GAAG,CAAC,aAAkC,CAAC;gBAEtD,MAAM,CAAC,MAAM,GAAG,eAAe,CAAC;gBAChC,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;gBACjB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACtB,CAAC;;;;;aAKJ;;KAER,CAAC;IACJ,CAAC;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAe,CAAC;IAC9D,CAAC;IAED,IAAY,cAAc;;QACxB,IAAI,OAAA,IAAI,CAAC,oBAAoB,0CAAE,IAAI,MAAK,IAAI,CAAC,IAAI,EAAE;YACjD,IAAI,CAAC,oBAAoB,GAAG;gBAC1B,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EACJ,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;oBAC3B,CAAC,CAAE,IAAI,QAAQ,CACX,KAAK,EACL,qBAAqB,IAAI,CAAC,IAAI,wGAAwG,IAAI,CAAC,IAAI,KAAK,CACpI;oBACpB,CAAC,CAAC,IAAI,CAAC,IAAI;aAChB,CAAC;SACH;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC;IAC1C,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CollectionPage, NucleonElement } from '../../public';\nimport type { InternalConfirmDialog } from '../InternalConfirmDialog';\nimport type { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\nimport type { FormDialog } from '../../index';\n\nimport { InternalControl } from '../InternalControl/InternalControl';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-element';\n\nexport class InternalAsyncListControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      hideDeleteButton: { type: Boolean, attribute: 'hide-delete-button' },\n      hideCreateButton: { type: Boolean, attribute: 'hide-create-button' },\n      getPageHref: { attribute: false },\n      related: { type: Array },\n      first: { type: String },\n      limit: { type: Number },\n      form: { type: String },\n      item: { type: String },\n      wide: { type: Boolean },\n      alert: { type: Boolean },\n    };\n  }\n\n  /** Same as the `related` property of `NucleonElement`. */\n  related = [] as string[];\n\n  /** Limit query parameter to apply to the `first` URL. */\n  limit = 20;\n\n  /** URI of the first page of the hAPI collection to display. */\n  first = '';\n\n  /** Same as the `form` property of `FormDialog`. If set, will open a dialog on item click. */\n  form: FormDialog['form'] = '';\n\n  /** Same as the `item` property of `CollectionPage`. */\n  item: CollectionPage<any>['item'] = '';\n\n  /** Same as the `wide` property of `FormDialog`. */\n  wide = false;\n\n  /** Same as the `alert` property of `FormDialog`. */\n  alert = false;\n\n  /** Hides Delete Swipe Action if true. */\n  hideDeleteButton = false;\n\n  /** Hides Create button if true. */\n  hideCreateButton = false;\n\n  /** If set, renders list items as <a> tags. */\n  getPageHref: ((itemHref: string) => string) | null = null;\n\n  private __deletionConfimationCallback: (() => void) | null = null;\n\n  private __cachedCardRenderer: {\n    item: InternalAsyncListControl['item'];\n    render: ItemRenderer;\n  } | null = null;\n\n  private __itemRenderer: ItemRenderer = ctx => {\n    if (!(this.form || this.getPageHref) || !ctx.data) return this.__cardRenderer(ctx);\n\n    const isDisabled = this.disabledSelector.matches('card', true);\n    const card = this.__cardRenderer(ctx);\n    let clickableItem: TemplateResult;\n\n    const wrapperClass = classMap({\n      'rounded-t-l': !ctx.previous,\n      'rounded-b-l': !ctx.next,\n      'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,\n      'text-left w-full block transition-colors': true,\n      'hover-bg-contrast-5': !isDisabled,\n    });\n\n    if (this.getPageHref) {\n      if (isDisabled) {\n        clickableItem = html`<div class=${wrapperClass}>${card}</div>`;\n      } else {\n        const href = this.getPageHref(ctx.href);\n        clickableItem = html`<a class=${wrapperClass} href=${href}>${card}</a>`;\n      }\n    } else {\n      const handleClick = (evt: Event) => {\n        const button = evt.currentTarget as HTMLButtonElement;\n        const dialog = this.__dialog;\n\n        dialog.header = 'header_update';\n        dialog.href = ctx.href;\n        dialog.show(button);\n      };\n\n      clickableItem = html`\n        <button ?disabled=${isDisabled} class=${wrapperClass} @click=${handleClick}>${card}</button>\n      `;\n    }\n\n    if (this.hideDeleteButton) return clickableItem;\n\n    return html`\n      <foxy-swipe-actions class=\"block\">\n        ${clickableItem}\n\n        <vaadin-button\n          theme=\"primary error\"\n          class=\"h-full rounded-t-l rounded-b-l\"\n          slot=\"action\"\n          @click=${(evt: CustomEvent) => {\n            const button = evt.currentTarget as HTMLElement;\n            const confirm = this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n\n            confirm.show(button);\n\n            this.__deletionConfimationCallback = () => {\n              const cardButton = button.previousElementSibling!;\n              const card = cardButton.querySelector<NucleonElement<any>>('[href]');\n\n              card?.delete();\n              this.__deletionConfimationCallback = null;\n            };\n          }}\n        >\n          <foxy-i18n infer=\"\" key=\"delete_button_text\"></foxy-i18n>\n        </vaadin-button>\n      </foxy-swipe-actions>\n    `;\n  };\n\n  renderControl(): TemplateResult {\n    let first: string;\n\n    try {\n      const url = new URL(this.first);\n      url.searchParams.set('limit', String(this.limit));\n      first = url.toString();\n    } catch {\n      first = this.first;\n    }\n\n    return html`\n      ${this.form\n        ? html`\n            <foxy-form-dialog\n              parent=${first}\n              infer=\"dialog\"\n              id=\"form\"\n              ?wide=${this.wide}\n              ?alert=${this.alert}\n              .related=${this.related}\n              .form=${this.form as any}\n            >\n            </foxy-form-dialog>\n\n            ${this.hideDeleteButton\n              ? ''\n              : html`\n                  <foxy-internal-confirm-dialog\n                    message=\"delete_message\"\n                    confirm=\"delete_confirm\"\n                    cancel=\"delete_cancel\"\n                    header=\"delete_header\"\n                    theme=\"error\"\n                    lang=${this.lang}\n                    ns=${this.ns}\n                    id=\"confirm\"\n                    @hide=${(evt: DialogHideEvent) => {\n                      if (!evt.detail.cancelled) this.__deletionConfimationCallback?.();\n                    }}\n                  >\n                  </foxy-internal-confirm-dialog>\n                `}\n          `\n        : ''}\n\n      <foxy-pagination first=${first} infer=\"pagination\">\n        <foxy-collection-page\n          class=\"mb-s block divide-y divide-contrast-5 rounded-t-l rounded-b-l overflow-hidden bg-contrast-5\"\n          infer=\"card\"\n          .related=${this.related}\n          .item=${this.__itemRenderer as any}\n        >\n        </foxy-collection-page>\n\n        ${!this.form || this.readonly || this.hideCreateButton\n          ? ''\n          : html`\n              <vaadin-button\n                class=\"mb-s bg-success-10 w-full rounded-t-l rounded-b-l\"\n                theme=\"success\"\n                ?disabled=${this.disabled}\n                @click=${(evt: Event) => {\n                  evt.preventDefault();\n                  evt.stopPropagation();\n\n                  const dialog = this.__dialog;\n                  const button = evt.currentTarget as HTMLButtonElement;\n\n                  dialog.header = 'header_create';\n                  dialog.href = '';\n                  dialog.show(button);\n                }}\n              >\n                <foxy-i18n infer=\"\" key=\"create_button_text\"></foxy-i18n>\n                <iron-icon class=\"icon-inline\" icon=\"icons:add\"></iron-icon>\n              </vaadin-button>\n            `}\n      </foxy-pagination>\n    `;\n  }\n\n  private get __dialog() {\n    return this.renderRoot.querySelector('#form') as FormDialog;\n  }\n\n  private get __cardRenderer() {\n    if (this.__cachedCardRenderer?.item !== this.item) {\n      this.__cachedCardRenderer = {\n        item: this.item,\n        render:\n          typeof this.item === 'string'\n            ? (new Function(\n                'ctx',\n                `return ctx.html\\`<${this.item} related=\\${JSON.stringify(ctx.related)} parent=\\${ctx.parent} class=\"p-m\" infer href=\\${ctx.href}></${this.item}>\\``\n              ) as ItemRenderer)\n            : this.item,\n      };\n    }\n\n    return this.__cachedCardRenderer.render;\n  }\n}\n"]}
+{"version":3,"file":"InternalAsyncListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CollectionPage, NucleonElement } from '../../public';\nimport type { InternalConfirmDialog } from '../InternalConfirmDialog';\nimport type { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\nimport type { FormDialog } from '../../index';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-element';\n\nexport class InternalAsyncListControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      hideDeleteButton: { type: Boolean, attribute: 'hide-delete-button' },\n      hideCreateButton: { type: Boolean, attribute: 'hide-create-button' },\n      getPageHref: { attribute: false },\n      related: { type: Array },\n      first: { type: String },\n      limit: { type: Number },\n      form: { type: String },\n      item: { type: String },\n      wide: { type: Boolean },\n      alert: { type: Boolean },\n    };\n  }\n\n  /** Same as the `related` property of `NucleonElement`. */\n  related = [] as string[];\n\n  /** Limit query parameter to apply to the `first` URL. */\n  limit = 20;\n\n  /** URI of the first page of the hAPI collection to display. */\n  first = '';\n\n  /** Same as the `form` property of `FormDialog`. If set, will open a dialog on item click. */\n  form: FormDialog['form'] = '';\n\n  /** Same as the `item` property of `CollectionPage`. */\n  item: CollectionPage<any>['item'] = '';\n\n  /** Same as the `wide` property of `FormDialog`. */\n  wide = false;\n\n  /** Same as the `alert` property of `FormDialog`. */\n  alert = false;\n\n  /** Hides Delete Swipe Action if true. */\n  hideDeleteButton = false;\n\n  /** Hides Create button if true. */\n  hideCreateButton = false;\n\n  /** If set, renders list items as <a> tags. */\n  getPageHref: ((itemHref: string, item: unknown) => string) | null = null;\n\n  private __deletionConfimationCallback: (() => void) | null = null;\n\n  private __cachedCardRenderer: {\n    item: InternalAsyncListControl['item'];\n    render: ItemRenderer;\n  } | null = null;\n\n  private __itemRenderer: ItemRenderer = ctx => {\n    if (!(this.form || this.getPageHref) || !ctx.data) return this.__cardRenderer(ctx);\n\n    const isDisabled = this.disabledSelector.matches('card', true);\n    const card = this.__cardRenderer(ctx);\n    let clickableItem: TemplateResult;\n\n    const wrapperClass = classMap({\n      'rounded-t': !ctx.previous,\n      'rounded-b': !ctx.next,\n      'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,\n      'text-left w-full block transition-colors': true,\n      'hover-bg-contrast-5': !isDisabled,\n    });\n\n    if (this.getPageHref) {\n      if (isDisabled) {\n        clickableItem = html`<div class=${wrapperClass}>${card}</div>`;\n      } else {\n        const href = this.getPageHref(ctx.href, ctx.data);\n        clickableItem = html`<a class=${wrapperClass} href=${href}>${card}</a>`;\n      }\n    } else {\n      const handleClick = (evt: Event) => {\n        const button = evt.currentTarget as HTMLButtonElement;\n        const dialog = this.__dialog;\n\n        dialog.header = 'header_update';\n        dialog.href = ctx.href;\n        dialog.show(button);\n      };\n\n      clickableItem = html`\n        <button ?disabled=${isDisabled} class=${wrapperClass} @click=${handleClick}>${card}</button>\n      `;\n    }\n\n    if (this.hideDeleteButton) return clickableItem;\n\n    return html`\n      <foxy-swipe-actions class=\"block\">\n        ${clickableItem}\n\n        <vaadin-button\n          theme=\"primary error\"\n          class=\"h-full\"\n          slot=\"action\"\n          @click=${(evt: CustomEvent) => {\n            const button = evt.currentTarget as HTMLElement;\n            const confirm = this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n\n            confirm.show(button);\n\n            this.__deletionConfimationCallback = () => {\n              const cardButton = button.previousElementSibling!;\n              const card = cardButton.querySelector<NucleonElement<any>>('[href]');\n\n              card?.delete();\n              this.__deletionConfimationCallback = null;\n            };\n          }}\n        >\n          <foxy-i18n infer=\"\" key=\"delete_button_text\"></foxy-i18n>\n        </vaadin-button>\n      </foxy-swipe-actions>\n    `;\n  };\n\n  renderControl(): TemplateResult {\n    let first: string;\n\n    try {\n      const url = new URL(this.first);\n      url.searchParams.set('limit', String(this.limit));\n      first = url.toString();\n    } catch {\n      first = this.first;\n    }\n\n    return html`\n      ${this.form\n        ? html`\n            <foxy-form-dialog\n              parent=${first}\n              infer=\"dialog\"\n              id=\"form\"\n              ?wide=${this.wide}\n              ?alert=${this.alert}\n              .related=${this.related}\n              .form=${this.form as any}\n            >\n            </foxy-form-dialog>\n\n            ${this.hideDeleteButton\n              ? ''\n              : html`\n                  <foxy-internal-confirm-dialog\n                    message=\"delete_message\"\n                    confirm=\"delete_confirm\"\n                    cancel=\"delete_cancel\"\n                    header=\"delete_header\"\n                    theme=\"error\"\n                    lang=${this.lang}\n                    ns=${this.ns}\n                    id=\"confirm\"\n                    @hide=${(evt: DialogHideEvent) => {\n                      if (!evt.detail.cancelled) this.__deletionConfimationCallback?.();\n                    }}\n                  >\n                  </foxy-internal-confirm-dialog>\n                `}\n          `\n        : ''}\n      ${this.label && this.label !== 'label'\n        ? html`<div class=\"font-medium text-secondary text-s mb-xs\">${this.label}</div>`\n        : ''}\n\n      <foxy-pagination first=${first} infer=\"pagination\">\n        <foxy-collection-page\n          class=\"mb-s block divide-y divide-contrast-5 rounded overflow-hidden bg-contrast-5\"\n          infer=\"card\"\n          .related=${this.related}\n          .item=${this.__itemRenderer as any}\n        >\n        </foxy-collection-page>\n\n        ${!this.form || this.readonly || this.hideCreateButton\n          ? ''\n          : html`\n              <vaadin-button\n                class=\"mb-s w-full\"\n                theme=\"success\"\n                ?disabled=${this.disabled}\n                @click=${(evt: Event) => {\n                  evt.preventDefault();\n                  evt.stopPropagation();\n\n                  const dialog = this.__dialog;\n                  const button = evt.currentTarget as HTMLButtonElement;\n\n                  dialog.header = 'header_create';\n                  dialog.href = '';\n                  dialog.show(button);\n                }}\n              >\n                <foxy-i18n infer=\"\" key=\"create_button_text\"></foxy-i18n>\n              </vaadin-button>\n            `}\n      </foxy-pagination>\n    `;\n  }\n\n  private get __dialog() {\n    return this.renderRoot.querySelector('#form') as FormDialog;\n  }\n\n  private get __cardRenderer() {\n    if (this.__cachedCardRenderer?.item !== this.item) {\n      this.__cachedCardRenderer = {\n        item: this.item,\n        render:\n          typeof this.item === 'string'\n            ? (new Function(\n                'ctx',\n                `return ctx.html\\`<${this.item} related=\\${JSON.stringify(ctx.related)} parent=\\${ctx.parent} style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\" infer href=\\${ctx.href}></${this.item}>\\``\n              ) as ItemRenderer)\n            : this.item,\n      };\n    }\n\n    return this.__cachedCardRenderer.render;\n  }\n}\n"]}

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

@@ -6,7 +6,7 @@ import '../../public/SwipeActions/index';
 import '../../public/FormDialog/index';
 import '../../public/Pagination/index';
 import '../../public/I18n/index';
+import '../InternalEditableControl/index';
 import '../InternalConfirmDialog/index';
-import '../InternalControl/index';
 import { InternalAsyncListControl as Control } from './InternalAsyncListControl';
 export { Control as InternalAsyncListControl };

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

@@ -6,8 +6,8 @@ import "../../public/SwipeActions/index.js";
 import "../../public/FormDialog/index.js";
 import "../../public/Pagination/index.js";
 import "../../public/I18n/index.js";
+import "../InternalEditableControl/index.js";
 import "../InternalConfirmDialog/index.js";
-import "../InternalControl/index.js";
 import { InternalAsyncListControl as Control } from "./InternalAsyncListControl.js";
 customElements.define('foxy-internal-async-list-control', Control);
 export { Control as InternalAsyncListControl };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncListControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAE5B,8CAA2C;AAC3C,4CAAyC;AACzC,0CAAuC;AACvC,0CAAuC;AACvC,oCAAiC;AAEjC,2CAAwC;AACxC,qCAAkC;AAElC,OAAO,EAAE,wBAAwB,IAAI,OAAO,EAAE,sCAAmC;AAEjF,cAAc,CAAC,MAAM,CAAC,kCAAkC,EAAE,OAAO,CAAC,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\nimport '@polymer/iron-icons';\nimport '@polymer/iron-icon';\n\nimport '../../public/CollectionPage/index';\nimport '../../public/SwipeActions/index';\nimport '../../public/FormDialog/index';\nimport '../../public/Pagination/index';\nimport '../../public/I18n/index';\n\nimport '../InternalConfirmDialog/index';\nimport '../InternalControl/index';\n\nimport { InternalAsyncListControl as Control } from './InternalAsyncListControl';\n\ncustomElements.define('foxy-internal-async-list-control', Control);\n\nexport { Control as InternalAsyncListControl };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncListControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAE5B,8CAA2C;AAC3C,4CAAyC;AACzC,0CAAuC;AACvC,0CAAuC;AACvC,oCAAiC;AAEjC,6CAA0C;AAC1C,2CAAwC;AAExC,OAAO,EAAE,wBAAwB,IAAI,OAAO,EAAE,sCAAmC;AAEjF,cAAc,CAAC,MAAM,CAAC,kCAAkC,EAAE,OAAO,CAAC,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\nimport '@polymer/iron-icons';\nimport '@polymer/iron-icon';\n\nimport '../../public/CollectionPage/index';\nimport '../../public/SwipeActions/index';\nimport '../../public/FormDialog/index';\nimport '../../public/Pagination/index';\nimport '../../public/I18n/index';\n\nimport '../InternalEditableControl/index';\nimport '../InternalConfirmDialog/index';\n\nimport { InternalAsyncListControl as Control } from './InternalAsyncListControl';\n\ncustomElements.define('foxy-internal-async-list-control', Control);\n\nexport { Control as InternalAsyncListControl };\n"]}

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

@@ -17,5 +17,6 @@ export declare class InternalCard<TData extends Data> extends InternalCard_base<
      */
     renderBody(): TemplateResult;
     render(): TemplateResult;
+    protected get _isBodyReady(): boolean;
 }
 export {};

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

@@ -17,6 +17,11 @@ export class InternalCard extends ThemeableMixin(NucleonElement) {
         return html ``;
     }
     render() {
+        const spinnerState = this.in('fail')
+            ? 'error'
+            : this.in({ idle: 'template' })
+                ? 'empty'
+                : 'busy';
         return html `
       <div
         aria-busy=${this.in('busy')}
@@ -26,7 +31,7 @@ export class InternalCard extends ThemeableMixin(NucleonElement) {
         <div
           class=${classMap({
             'transition duration-500 ease-in-out': true,
-            'opacity-0 pointer-events-none': !this.in({ idle: 'snapshot' }),
+            'opacity-0 pointer-events-none': !this._isBodyReady,
         })}
         >
           ${this.renderBody()}
@@ -35,12 +40,12 @@ export class InternalCard extends ThemeableMixin(NucleonElement) {
         <div
           class=${classMap({
             'transition duration-500 ease-in-out absolute inset-0 flex': true,
-            'opacity-0 pointer-events-none': this.in({ idle: 'snapshot' }),
+            'opacity-0 pointer-events-none': this._isBodyReady,
         })}
         >
           <foxy-spinner
-            layout=${this.in('busy') ? 'no-label' : 'horizontal'}
-            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}
+            layout=${spinnerState === 'busy' ? 'no-label' : 'horizontal'}
+            state=${spinnerState}
             class="m-auto"
             infer="spinner"
           >
@@ -49,5 +54,8 @@ export class InternalCard extends ThemeableMixin(NucleonElement) {
       </div>
     `;
     }
+    get _isBodyReady() {
+        return !!this.data;
+    }
 }
 //# sourceMappingURL=InternalCard.js.map