@foxy.io/elements 1.29.0 → 1.30.0-beta.1

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

@@ -120,12 +120,16 @@
   "ordinal_other": "th",
   "ordinal_two": "nd",
   "ordinal_zero": "th",
-  "name": {
-    "label": "Name",
-    "placeholder": "Required",
-    "helper_text": "Coupon name is visible to the customers.",
-    "v8n_required": "Please enter a name for this coupon.",
-    "v8n_too_long": "Please shorten the name to 50 characters or less."
+  "general": {
+    "label": "",
+    "helper_text": "",
+    "name": {
+      "label": "Name",
+      "placeholder": "Required",
+      "helper_text": "Coupon name is visible to the customers.",
+      "v8n_required": "Please enter a name for this coupon.",
+      "v8n_too_long": "Please shorten the name to 50 characters or less."
+    }
   },
   "rules": {
     "label": "Rules",
@@ -439,23 +443,27 @@
       "previous": "Previous"
     }
   },
-  "number-of-uses-allowed": {
-    "label": "Uses per coupon",
-    "placeholder": "Unlimited",
-    "helper_text": "The maximum number of times this coupon can be used. Leave blank for unlimited uses.",
-    "v8n_too_small": "Please enter a value greater or equal to 0."
-  },
-  "number-of-uses-allowed-per-customer": {
-    "label": "Uses per customer",
-    "placeholder": "Unlimited",
-    "helper_text": "The maximum number of times a single customer can use this coupon. Leave blank for unlimited uses.",
-    "v8n_too_small": "Please enter a value greater or equal to 0."
-  },
-  "number-of-uses-allowed-per-code": {
-    "label": "Uses per code",
-    "placeholder": "Unlimited",
-    "helper_text": "The maximum number of times a single code can be used. Leave blank for unlimited uses.",
-    "v8n_too_small": "Please enter a value greater or equal to 0."
+  "uses": {
+    "label": "Usage restrictions",
+    "helper_text": "",
+    "number-of-uses-allowed": {
+      "label": "Uses per coupon",
+      "placeholder": "Unlimited",
+      "helper_text": "The maximum number of times this coupon can be used. Leave blank for unlimited uses.",
+      "v8n_too_small": "Please enter a value greater or equal to 0."
+    },
+    "number-of-uses-allowed-per-customer": {
+      "label": "Uses per customer",
+      "placeholder": "Unlimited",
+      "helper_text": "The maximum number of times a single customer can use this coupon. Leave blank for unlimited uses.",
+      "v8n_too_small": "Please enter a value greater or equal to 0."
+    },
+    "number-of-uses-allowed-per-code": {
+      "label": "Uses per code",
+      "placeholder": "Unlimited",
+      "helper_text": "The maximum number of times a single code can be used. Leave blank for unlimited uses.",
+      "v8n_too_small": "Please enter a value greater or equal to 0."
+    }
   },
   "product-code-restrictions": {
     "label": "Product code restrictions",
@@ -469,36 +477,77 @@
   },
   "options": {
     "label": "Options",
-    "option_multiple_codes_allowed": "Allow multiple codes on the same order",
-    "option_combinable": "Allow combining with other coupons",
-    "option_exclude_category_discounts": "Don't apply category discounts with this coupon",
-    "option_exclude_line_item_discounts": "Don't apply line item discounts with this coupon",
-    "option_is_taxable": "Apply taxes before this coupon",
-    "option_shared_codes_allowed": "Enable code sharing between coupons",
-    "option_customer_auto_apply": "Enable auto-apply",
-    "helper_text": ""
-  },
-  "start-date": {
-    "label": "Start date",
-    "placeholder": "Optional",
-    "helper_text": "The date and time when this coupon will become active. Leave blank to activate immediately."
+    "helper_text": "",
+    "multiple-codes-allowed": {
+      "label": "Allow multiple codes on the same order",
+      "helper_text": "",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
+    "combinable": {
+      "label": "Allow combining with other coupons",
+      "helper_text": "",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
+    "exclude-category-discounts": {
+      "label": "Don't apply category discounts with this coupon",
+      "helper_text": "",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
+    "exclude-line-item-discounts": {
+      "label": "Don't apply line item discounts with this coupon",
+      "helper_text": "",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
+    "is-taxable": {
+      "label": "Apply taxes before this coupon",
+      "helper_text": "",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
+    "shared-codes-allowed": {
+      "label": "Enable code sharing between coupons",
+      "helper_text": "",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
+    "customer-auto-apply": {
+      "label": "Enable auto-apply",
+      "helper_text": "",
+      "checked": "Yes",
+      "unchecked": "No"
+    }
   },
-  "end-date": {
-    "label": "End date",
-    "placeholder": "Optional",
-    "helper_text": "The date and time when this coupon will expire. Leave blank for no expiration."
+  "timeframe": {
+    "label": "Date restrictions",
+    "helper_text": "",
+    "start-date": {
+      "label": "Start date",
+      "placeholder": "Select",
+      "display_value": "{{ value, date }}",
+      "helper_text": "The date and time when this coupon will become active. Leave blank to activate immediately."
+    },
+    "end-date": {
+      "label": "End date",
+      "placeholder": "Select",
+      "display_value": "{{ value, date }}",
+      "helper_text": "The date and time when this coupon will expire. Leave blank for no expiration."
+    }
   },
   "customer-subscription-restrictions": {
-    "label": "Auto-apply: subscription restrictions",
+    "label": "Subscription restrictions",
     "placeholder": "Enter a product code and hit Enter",
-    "helper_text": "This coupon will be automatically applied when a subscription includes a product with one of the codes in the list. Wildcards are allowed just like in product code restrictions.",
+    "helper_text": "This coupon will be applied only when a subscription includes a product with one of the codes in the list. Wildcards are allowed just like in product code restrictions.",
     "caption": "Add this code",
     "delete": "Delete this code",
     "v8n_too_long": "Unfortunately we are unable to store that many subscription restrictions at the moment. Please reduce the number of rules in this section until this message disappears."
   },
   "customer-attribute-restrictions": {
-    "label": "Auto-apply: customer restrictions",
-    "helper_text": "This coupon will be automatically applied when a customer record matches this query.",
+    "label": "Customer restrictions",
+    "helper_text": "This coupon will be applied only when a customer record matches this query.",
     "v8n_too_long": "Unfortunately we are unable to store that many customer restrictions at the moment. Please reduce the number of rules in this section until this message disappears.",
     "query-builder": {
       "add_or_clause": "Add OR clause",
@@ -598,12 +647,16 @@
     },
     "helper_text": "Limit which categories this coupon applies to. All changes are saved automatically."
   },
-  "inclusive-tax-rate": {
-    "label": "Tax rate",
-    "placeholder": "Optional",
-    "helper_text": "The tax rate to apply to the coupon in tax-inclusive mode. This is a decimal value from 0 to 1.",
-    "v8n_too_small": "Please enter a value greater or equal to 0.",
-    "v8n_too_big": "Please enter a value less than or equal to 1."
+  "taxes": {
+    "label": "Tax settings",
+    "helper_text": "",
+    "inclusive-tax-rate": {
+      "label": "Tax rate",
+      "placeholder": "Optional",
+      "helper_text": "The tax rate to apply to the coupon in tax-inclusive mode. This is a decimal value from 0 to 1.",
+      "v8n_too_small": "Please enter a value greater or equal to 0.",
+      "v8n_too_big": "Please enter a value less than or equal to 1."
+    }
   },
   "timestamps": {
     "date_created": "Created on",

package/dist/cdn/translations/transaction/en.json

@@ -732,6 +732,103 @@
       }
     }
   },
+  "webhooks": {
+    "label": "Webhooks",
+    "helper_text": "This list shows v2 webhooks only. Legacy v1 webhooks are available in Settings > Integrations and on admin.foxycart.com.",
+    "dialog": {
+      "close": "Close",
+      "cancel": "Cancel",
+      "header_update": "Webhook",
+      "webhook-form": {
+        "header": {
+          "title_existing": "{{ name }}",
+          "subtitle_transaction": ""
+        },
+        "url": {
+          "label": "URL",
+          "helper_text": ""
+        },
+        "statuses": {
+          "label": "Runs",
+          "pagination": {
+            "first": "First",
+            "last": "Last",
+            "next": "Next",
+            "pagination": "{{from}}-{{to}} out of {{total}}",
+            "previous": "Previous",
+            "card": {
+              "status_successful": "Successful",
+              "status_pending": "Pending",
+              "status_failed": "Failed",
+              "date": "{{ value, date }} at {{ value, time }}",
+              "spinner": {
+                "loading_busy": "Loading",
+                "loading_error": "Unknown error",
+                "loading_empty": "No runs for this transaction yet"
+              }
+            }
+          }
+        },
+        "logs": {
+          "label": "Logs",
+          "pagination": {
+            "first": "First",
+            "last": "Last",
+            "next": "Next",
+            "pagination": "{{from}}-{{to}} out of {{total}}",
+            "previous": "Previous",
+            "card": {
+              "date": "{{ value, date }} at {{ value, time }}",
+              "spinner": {
+                "loading_busy": "Loading",
+                "loading_error": "Unknown error",
+                "loading_empty": "No runs for this transaction yet"
+              }
+            }
+          }
+        },
+        "spinner": {
+          "refresh": "Refresh",
+          "loading_busy": "Loading",
+          "loading_error": "Unknown error"
+        }
+      }
+    },
+    "pagination": {
+      "select_button_text": "Select",
+      "cancel_button_text": "Cancel",
+      "refeed_bulk_action_caption_idle": "Refeed ({{ count }})",
+      "refeed_bulk_action_caption_busy": "Refeeding...",
+      "refeed_bulk_action_notification_done": "Selected webhooks were sent successfully.",
+      "refeed_bulk_action_notification_fail": "Failed to refeed selected webhooks.",
+      "first": "First",
+      "last": "Last",
+      "next": "Next",
+      "pagination": "{{from}}-{{to}} out of {{total}}",
+      "previous": "Previous",
+      "card": {
+        "status_successful": "OK",
+        "status_pending": "Pending",
+        "status_failed": "Failed",
+        "status_none": "No runs yet",
+        "spinner": {
+          "loading_busy": "Loading",
+          "loading_empty": "No webhooks",
+          "loading_error": "Unknown error"
+        }
+      }
+    }
+  },
+  "datafeed": {
+    "label": "Legacy XML datafeed",
+    "helper_text": "To resend this webhook, use the Resend datafeed button at the top of the page.",
+    "data-is-fed": {
+      "label": "Status",
+      "helper_text": "",
+      "checked": "Sent",
+      "unchecked": "Not sent"
+    }
+  },
   "summary": {
     "total_shipping": "Shipping",
     "total_tax": "Tax",
@@ -1569,6 +1666,17 @@
         "cancel": "No"
       }
     },
+    "resend-datafeed": {
+      "idle": "Resend datafeed",
+      "busy": "Resending datafeed...",
+      "fail": "Failed to resend datafeed",
+      "confirm": {
+        "header": "Resend datafeed",
+        "message": "Are you sure you'd like to resend XML datafeed for this transaction?",
+        "confirm": "Yes",
+        "cancel": "No"
+      }
+    },
     "subscription": {
       "caption": "Go to subscription"
     }

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

@@ -1,7 +1,11 @@
 {
+  "status_successful": "OK",
+  "status_pending": "Pending",
+  "status_failed": "Failed",
+  "status_none": "No runs yet",
   "spinner": {
     "loading_busy": "Loading",
     "loading_error": "Unknown error",
     "loading_empty": "No data"
   }
-}
+}

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

@@ -1,8 +1,9 @@
 import type { PropertyDeclarations, TemplateResult } from 'lit-element';
 import type { CollectionPage } from '../../public/index';
+import type { BulkAction, SwipeAction } from './types';
+import type { HALJSONResource } from '../../public/NucleonElement/types';
 import type { FormDialog } from '../../index';
 import type { Option } from '../../public/QueryBuilder/types';
-import type { Action } from './types';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
 export declare class InternalAsyncListControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
@@ -12,10 +13,12 @@ export declare class InternalAsyncListControl extends InternalEditableControl {
     keepDialogOpenOnPost: boolean;
     /** If provided, renders Create button as a link to this page. */
     createPageHref: string | null;
+    /** Bulk actions that appear when one or more items are selected. */
+    bulkActions: BulkAction<HALJSONResource>[];
     /** Same as the `related` property of `NucleonElement`. */
     related: string[];
     /** Swipe actions. */
-    actions: Action<import("../../public/NucleonElement/types").HALJSONResource>[];
+    actions: SwipeAction<HALJSONResource>[];
     /** Query parameters to apply to the `first` URL. */
     filters: Option[];
     /** Limit query parameter to apply to the `first` URL. */
@@ -42,7 +45,11 @@ export declare class InternalAsyncListControl extends InternalEditableControl {
     getPageHref: ((itemHref: string, item: unknown) => string | null) | null;
     private __deletionConfimationCallback;
     private __cachedCardRenderer;
+    private __activeBulkAction;
     private __isFilterVisible;
+    private __notification;
+    private __isSelecting;
+    private __selection;
     private __itemRenderer;
     private __filter;
     renderControl(): TemplateResult;

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

@@ -1,6 +1,7 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { classMap } from "../../../utils/class-map.js";
+import { render } from 'lit-html';
 import { html } from 'lit-element';
 export class InternalAsyncListControl extends InternalEditableControl {
     constructor() {
@@ -11,6 +12,8 @@ export class InternalAsyncListControl extends InternalEditableControl {
         this.keepDialogOpenOnPost = false;
         /** If provided, renders Create button as a link to this page. */
         this.createPageHref = null;
+        /** Bulk actions that appear when one or more items are selected. */
+        this.bulkActions = [];
         /** Same as the `related` property of `NucleonElement`. */
         this.related = [];
         /** Swipe actions. */
@@ -41,11 +44,36 @@ export class InternalAsyncListControl extends InternalEditableControl {
         this.getPageHref = null;
         this.__deletionConfimationCallback = null;
         this.__cachedCardRenderer = null;
+        this.__activeBulkAction = null;
         this.__isFilterVisible = false;
+        this.__notification = null;
+        this.__isSelecting = false;
+        this.__selection = [];
         this.__itemRenderer = ctx => {
             var _a;
             if (!ctx.data)
                 return this.__cardRenderer(ctx);
+            if (this.__isSelecting) {
+                return html `
+        <vaadin-checkbox
+          class="block w-full"
+          style="padding-left: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+          data-async-list-control
+          ?disabled=${this.disabled || !!this.__activeBulkAction}
+          ?checked=${this.__selection.find(v => v._links.self.href === ctx.data._links.self.href)}
+          @change=${(evt) => {
+                    if (evt.currentTarget.checked) {
+                        this.__selection = [...this.__selection, ctx.data];
+                    }
+                    else {
+                        this.__selection = this.__selection.filter(v => v._links.self.href !== ctx.data._links.self.href);
+                    }
+                }}
+        >
+          ${this.__cardRenderer(ctx)}
+        </vaadin-checkbox>
+      `;
+            }
             const href = (_a = this.getPageHref) === null || _a === void 0 ? void 0 : _a.call(this, ctx.href, ctx.data);
             if (typeof href !== 'string' && !this.form)
                 return this.__cardRenderer(ctx);
@@ -88,7 +116,7 @@ export class InternalAsyncListControl extends InternalEditableControl {
         <button ?disabled=${isDisabled} class=${wrapperClass} @click=${handleClick}>${card}</button>
       `;
             }
-            if (this.hideDeleteButton || this.readonly)
+            if ((this.hideDeleteButton && !this.actions.length) || this.readonly)
                 return clickableItem;
             return html `
       <foxy-swipe-actions class="block">
@@ -124,25 +152,28 @@ export class InternalAsyncListControl extends InternalEditableControl {
             </vaadin-button>
           `;
             })}
-
-        <vaadin-button
-          theme="primary error"
-          class="h-full rounded-none"
-          slot="action"
-          @click=${(evt) => {
-                const button = evt.currentTarget;
-                const confirm = this.renderRoot.querySelector('#confirm');
-                confirm.show(button);
-                this.__deletionConfimationCallback = () => {
-                    const cardButton = button.parentElement.firstElementChild;
-                    const card = cardButton.querySelector('[href]');
-                    card === null || card === void 0 ? void 0 : card.delete();
-                    this.__deletionConfimationCallback = null;
-                };
-            }}
-        >
-          <foxy-i18n infer="" key="delete_button_text"></foxy-i18n>
-        </vaadin-button>
+        ${this.hideDeleteButton
+                ? ''
+                : html `
+              <vaadin-button
+                theme="primary error"
+                class="h-full rounded-none"
+                slot="action"
+                @click=${(evt) => {
+                    const button = evt.currentTarget;
+                    const confirm = this.renderRoot.querySelector('#confirm');
+                    confirm.show(button);
+                    this.__deletionConfimationCallback = () => {
+                        const cardButton = button.parentElement.firstElementChild;
+                        const card = cardButton.querySelector('[href]');
+                        card === null || card === void 0 ? void 0 : card.delete();
+                        this.__deletionConfimationCallback = null;
+                    };
+                }}
+              >
+                <foxy-i18n infer="" key="delete_button_text"></foxy-i18n>
+              </vaadin-button>
+            `}
       </foxy-swipe-actions>
     `;
         };
@@ -166,14 +197,19 @@ export class InternalAsyncListControl extends InternalEditableControl {
             itemProps: { type: Object, attribute: 'item-props' },
             wide: { type: Boolean },
             alert: { type: Boolean },
-            actions: { type: Array },
+            actions: { attribute: false },
+            bulkActions: { attribute: false },
             filters: { type: Array },
             __filter: { attribute: false },
+            __selection: { attribute: false },
+            __isSelecting: { attribute: false },
+            __notification: { attribute: false },
             __isFilterVisible: { attribute: false },
+            __activeBulkAction: { attribute: false },
         };
     }
     renderControl() {
-        var _a, _b;
+        var _a, _b, _c;
         let first;
         try {
             const url = new URL((_a = this.first) !== null && _a !== void 0 ? _a : '');
@@ -182,11 +218,11 @@ export class InternalAsyncListControl extends InternalEditableControl {
             filter.forEach((value, key) => url.searchParams.set(key, value));
             first = url.toString();
         }
-        catch (_c) {
+        catch (_d) {
             first = undefined;
         }
         return html `
-      ${this.form
+      ${this.form && !this.__isSelecting
             ? html `
             <foxy-form-dialog
               parent=${ifDefined((_b = this.first) !== null && _b !== void 0 ? _b : void 0)}
@@ -203,7 +239,7 @@ export class InternalAsyncListControl extends InternalEditableControl {
             </foxy-form-dialog>
           `
             : ''}
-      ${this.hideDeleteButton || this.readonly
+      ${this.hideDeleteButton || this.readonly || this.__isSelecting
             ? ''
             : html `
             <foxy-internal-confirm-dialog
@@ -223,11 +259,11 @@ export class InternalAsyncListControl extends InternalEditableControl {
             </foxy-internal-confirm-dialog>
           `}
       <div class="flex gap-m items-center justify-between mb-xs text-s font-medium">
-        <span class="text-secondary">
+        <span class="text-secondary mr-auto">
           ${this.label && this.label !== 'label' ? this.label : ''}
         </span>
 
-        ${this.filters.length > 0
+        ${this.filters.length > 0 && !this.__isSelecting
             ? html `
               <foxy-internal-async-list-control-filter-overlay
                 .noVerticalOverlap=${true}
@@ -249,7 +285,6 @@ export class InternalAsyncListControl extends InternalEditableControl {
 
               <vaadin-button
                 theme="tertiary-inline contrast"
-                class="ml-auto"
                 id="filters"
                 ?disabled=${this.disabled}
                 @click=${() => (this.__isFilterVisible = !this.__isFilterVisible)}
@@ -258,7 +293,67 @@ export class InternalAsyncListControl extends InternalEditableControl {
               </vaadin-button>
             `
             : ''}
-        ${(!this.form && !this.createPageHref) || this.readonly || this.hideCreateButton
+        ${this.bulkActions.length > 0 && this.first
+            ? html `
+              ${this.__selection.length > 0
+                ? this.bulkActions.map(action => {
+                    var _a;
+                    const nPrefix = `${action.name}_bulk_action_notification`;
+                    const cPrefix = `${action.name}_bulk_action_caption`;
+                    const isActive = ((_a = this.__activeBulkAction) === null || _a === void 0 ? void 0 : _a.name) === action.name;
+                    return html `
+                      <vaadin-button
+                        data-testclass="bulk-action"
+                        theme="tertiary-inline"
+                        ?disabled=${this.disabled || !!this.__activeBulkAction}
+                        @click=${async () => {
+                        var _a;
+                        this.__activeBulkAction = action;
+                        try {
+                            await action.onClick(this.__selection);
+                            this.__selection = [];
+                            this.__isSelecting = false;
+                            this.__notification = { key: `${nPrefix}_done`, theme: 'success' };
+                        }
+                        catch (_b) {
+                            this.__notification = { key: `${nPrefix}_fail`, theme: 'error' };
+                        }
+                        finally {
+                            this.__activeBulkAction = null;
+                            (_a = this.renderRoot.querySelector('vaadin-notification')) === null || _a === void 0 ? void 0 : _a.open();
+                        }
+                    }}
+                      >
+                        <foxy-i18n
+                          infer="pagination"
+                          key="${cPrefix}_${isActive ? 'busy' : 'idle'}"
+                          .options=${{ count: this.__selection.length }}
+                        >
+                        </foxy-i18n>
+                      </vaadin-button>
+                    `;
+                })
+                : ''}
+              <vaadin-button
+                theme="tertiary-inline contrast"
+                ?disabled=${this.disabled || !!this.__activeBulkAction}
+                @click=${() => {
+                this.__isSelecting = !this.__isSelecting;
+                this.__selection = [];
+            }}
+              >
+                <foxy-i18n
+                  infer="pagination"
+                  key=${this.__isSelecting ? 'cancel_button_text' : 'select_button_text'}
+                >
+                </foxy-i18n>
+              </vaadin-button>
+            `
+            : ''}
+        ${(!this.form && !this.createPageHref) ||
+            this.readonly ||
+            this.hideCreateButton ||
+            this.__isSelecting
             ? ''
             : this.createPageHref && !this.disabled
                 ? html `
@@ -297,8 +392,8 @@ export class InternalAsyncListControl extends InternalEditableControl {
         <foxy-collection-page
           class=${classMap({
             'block divide-y divide-contrast-5 rounded overflow-hidden': true,
-            'ring-1 ring-inset ring-contrast-10': !this.form && !this.getPageHref,
-            'bg-contrast-5': !!this.form || !!this.getPageHref,
+            'ring-1 ring-inset ring-contrast-10': this.__isSelecting || (!this.form && !this.getPageHref),
+            'bg-contrast-5': !this.__isSelecting && (!!this.form || !!this.getPageHref),
         })}
           infer="card"
           .related=${this.related}
@@ -321,10 +416,33 @@ export class InternalAsyncListControl extends InternalEditableControl {
 
       <div
         class="mt-xs text-xs leading-xs text-error"
-        ?hidden=${!this._errorMessage || this.disabled || this.readonly}
+        ?hidden=${!this._errorMessage || this.disabled || this.readonly || this.__isSelecting}
       >
         ${this._errorMessage}
       </div>
+
+      <vaadin-notification
+        position="bottom-end"
+        duration="3000"
+        theme=${ifDefined((_c = this.__notification) === null || _c === void 0 ? void 0 : _c.theme)}
+        .renderer=${(root) => {
+            var _a, _b;
+            if (!root.firstElementChild)
+                root.innerHTML = '<span></span>';
+            const theme = (_a = this.__notification) === null || _a === void 0 ? void 0 : _a.theme;
+            const layout = html `
+            <foxy-i18n
+              style="color: var(--lumo-${theme ? `${theme}-contrast` : 'body-text'}-color)"
+              lang=${this.lang}
+              key=${(_b = this.__notification) === null || _b === void 0 ? void 0 : _b.key}
+              ns="${this.ns} pagination"
+            >
+            </foxy-i18n>
+          `;
+            render(layout, root.firstElementChild);
+        }}
+      >
+      </vaadin-notification>
     `;
     }
     get __dialog() {