@foxy.io/elements 1.41.0 → 1.42.0-beta.2

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

@@ -60,11 +60,10 @@
     "delete_cancel": "Cancel",
     "pagination": {
       "create_button_text": "Add item +",
-      "first": "First",
-      "last": "Last",
-      "next": "Next",
-      "pagination": "{{from}}-{{to}} out of {{total}}",
-      "previous": "Previous",
+      "page_number": "Page number:",
+      "per_page": "Per page:",
+      "jump_to": "Jump to:",
+      "jump": "Jump",
       "card": {
         "delete_button_text": "Remove",
         "daily": "Daily",
@@ -156,11 +155,10 @@
                 "clear": "Clear",
                 "pagination": {
                   "search_button_text": "Filters",
-                  "first": "First",
-                  "last": "Last",
-                  "next": "Next",
-                  "pagination": "{{from}}-{{to}} out of {{total}}",
-                  "previous": "Previous",
+                  "page_number": "Page number:",
+                  "per_page": "Per page:",
+                  "jump_to": "Jump to:",
+                  "jump": "Jump",
                   "card": {
                     "spinner": {
                       "loading_busy": "Loading",
@@ -304,11 +302,10 @@
         "discount-details": {
           "label": "Applied discounts",
           "pagination": {
-            "first": "First",
-            "last": "Last",
-            "next": "Next",
-            "pagination": "{{from}}-{{to}} out of {{total}}",
-            "previous": "Previous",
+            "page_number": "Page number:",
+            "per_page": "Per page:",
+            "jump_to": "Jump to:",
+            "jump": "Jump",
             "card": {
               "spinner": {
                 "loading_busy": "Loading",
@@ -321,11 +318,10 @@
         "coupon-details": {
           "label": "Applied coupons",
           "pagination": {
-            "first": "First",
-            "last": "Last",
-            "next": "Next",
-            "pagination": "{{from}}-{{to}} out of {{total}}",
-            "previous": "Previous",
+            "page_number": "Page number:",
+            "per_page": "Per page:",
+            "jump_to": "Jump to:",
+            "jump": "Jump",
             "card": {
               "spinner": {
                 "loading_busy": "Loading",
@@ -428,11 +424,10 @@
                 "loading_error": "Unknown error"
               }
             },
-            "first": "First",
-            "last": "Last",
-            "next": "Next",
-            "pagination": "{{from}}-{{to}} out of {{total}}",
-            "previous": "Previous"
+            "page_number": "Page number:",
+            "per_page": "Per page:",
+            "jump_to": "Jump to:",
+            "jump": "Jump"
           }
         },
         "item-options": {
@@ -537,11 +532,10 @@
               }
             },
             "create_button_text": "Add option +",
-            "first": "First",
-            "last": "Last",
-            "next": "Next",
-            "pagination": "{{from}}-{{to}} out of {{total}}",
-            "previous": "Previous"
+            "page_number": "Page number:",
+            "per_page": "Per page:",
+            "jump_to": "Jump to:",
+            "jump": "Jump"
           }
         },
         "timestamps": {
@@ -652,11 +646,10 @@
     },
     "pagination": {
       "create_button_text": "Add custom field +",
-      "first": "First",
-      "last": "Last",
-      "next": "Next",
-      "pagination": "{{from}}-{{to}} out of {{total}}",
-      "previous": "Previous",
+      "page_number": "Page number:",
+      "per_page": "Per page:",
+      "jump_to": "Jump to:",
+      "jump": "Jump",
       "card": {
         "delete_button_text": "Remove",
         "spinner": {
@@ -752,11 +745,10 @@
     },
     "pagination": {
       "create_button_text": "Add attribute +",
-      "first": "First",
-      "last": "Last",
-      "next": "Next",
-      "pagination": "{{from}}-{{to}} out of {{total}}",
-      "previous": "Previous",
+      "page_number": "Page number:",
+      "per_page": "Per page:",
+      "jump_to": "Jump to:",
+      "jump": "Jump",
       "card": {
         "delete_button_text": "Remove",
         "spinner": {
@@ -786,11 +778,10 @@
         "statuses": {
           "label": "Runs",
           "pagination": {
-            "first": "First",
-            "last": "Last",
-            "next": "Next",
-            "pagination": "{{from}}-{{to}} out of {{total}}",
-            "previous": "Previous",
+            "page_number": "Page number:",
+            "per_page": "Per page:",
+            "jump_to": "Jump to:",
+            "jump": "Jump",
             "card": {
               "status_initializing": "Initializing",
               "status_successful": "Successful",
@@ -808,11 +799,10 @@
         "logs": {
           "label": "Logs",
           "pagination": {
-            "first": "First",
-            "last": "Last",
-            "next": "Next",
-            "pagination": "{{from}}-{{to}} out of {{total}}",
-            "previous": "Previous",
+            "page_number": "Page number:",
+            "per_page": "Per page:",
+            "jump_to": "Jump to:",
+            "jump": "Jump",
             "card": {
               "date": "{{ value, date }} at {{ value, time }}",
               "spinner": {
@@ -837,11 +827,10 @@
       "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",
+      "page_number": "Page number:",
+      "per_page": "Per page:",
+      "jump_to": "Jump to:",
+      "jump": "Jump",
       "card": {
         "status_initializing": "Last run: {{ date_created, date }} at {{ date_created, time }} • Initializing",
         "status_successful": "Last run: {{ date_created, date }} at {{ date_created, time }} • Successful",
@@ -909,11 +898,10 @@
   "payments": {
     "label": "Payments",
     "pagination": {
-      "first": "First",
-      "last": "Last",
-      "next": "Next",
-      "pagination": "{{from}}-{{to}} out of {{total}}",
-      "previous": "Previous",
+      "page_number": "Page number:",
+      "per_page": "Per page:",
+      "jump_to": "Jump to:",
+      "jump": "Jump",
       "card": {
         "code": "Code",
         "date": "{{value, date}}",
@@ -1638,11 +1626,10 @@
       }
     },
     "pagination": {
-      "first": "First",
-      "last": "Last",
-      "next": "Next",
-      "pagination": "{{from}}-{{to}} out of {{total}}",
-      "previous": "Previous",
+      "page_number": "Page number:",
+      "per_page": "Per page:",
+      "jump_to": "Jump to:",
+      "jump": "Jump",
       "card": {
         "full_address": "{{address1}} {{address2}} {{city}} {{region}} {{country}} {{postal_code}}",
         "full_name": "{{first_name}} {{last_name}}",
@@ -1657,11 +1644,10 @@
   "shipments": {
     "label": "Shipments",
     "pagination": {
-      "first": "First",
-      "last": "Last",
-      "next": "Next",
-      "pagination": "{{from}}-{{to}} out of {{total}}",
-      "previous": "Previous",
+      "page_number": "Page number:",
+      "per_page": "Per page:",
+      "jump_to": "Jump to:",
+      "jump": "Jump",
       "card": {
         "full_address": "{{ address1 }} {{ address2 }} {{ city }} {{ region }} {{ postal_code }}",
         "quantity": "Qty: {{ count }}",

package/dist/cdn/translations/update-payment-method-form/en.json

@@ -23,11 +23,10 @@
         "clear": "Clear",
         "pagination": {
           "search_button_text": "Filters",
-          "first": "First",
-          "last": "Last",
-          "next": "Next",
-          "pagination": "{{from}}-{{to}} out of {{total}}",
-          "previous": "Previous",
+          "page_number": "Page number:",
+          "per_page": "Per page:",
+          "jump_to": "Jump to:",
+          "jump": "Jump",
           "card": {
             "spinner": {
               "loading_busy": "Loading",

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

@@ -76,11 +76,10 @@
   "statuses": {
     "label": "Runs",
     "pagination": {
-      "first": "First",
-      "last": "Last",
-      "next": "Next",
-      "pagination": "{{from}}-{{to}} out of {{total}}",
-      "previous": "Previous",
+      "page_number": "Page number:",
+      "per_page": "Per page:",
+      "jump_to": "Jump to:",
+      "jump": "Jump",
       "card": {
         "status_initializing": "Initializing",
         "status_successful": "Successful",
@@ -98,11 +97,10 @@
   "logs": {
     "label": "Logs",
     "pagination": {
-      "first": "First",
-      "last": "Last",
-      "next": "Next",
-      "pagination": "{{from}}-{{to}} out of {{total}}",
-      "previous": "Previous",
+      "page_number": "Page number:",
+      "per_page": "Per page:",
+      "jump_to": "Jump to:",
+      "jump": "Jump",
       "card": {
         "date": "{{ value, date }} at {{ value, time }}",
         "spinner": {

package/dist/elements/public/Pagination/Pagination.d.ts

@@ -1,10 +1,11 @@
-import { LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { PropertyDeclarations, TemplateResult, CSSResultArray } from 'lit-element';
+import { LitElement } from 'lit-element';
 declare const Base: typeof LitElement & import("lit-element").Constructor<import("../../../mixins/inferrable").InferrableMixinHost> & {
     inferredProperties: string[];
 } & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
 } & {
-    styles: import("lit-element").CSSResultArray;
+    styles: CSSResultArray;
 } & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
 /**
  * Helper element that adds pagination controls to elements
@@ -23,16 +24,22 @@ declare const Base: typeof LitElement & import("lit-element").Constructor<import
  */
 export declare class Pagination extends Base {
     static get properties(): PropertyDeclarations;
+    static get styles(): CSSResultArray;
+    private readonly __handlePageElementUpdate;
+    private readonly __handleScrollAndResize;
     private __pageElement;
-    private __rerender;
+    private __customPage;
     private __first;
-    /** URL of the first page of the colletion. */
+    private __limit;
+    private __page;
+    /** URL of the first page of the collection. */
     get first(): string;
     set first(newValue: string);
     connectedCallback(): void;
     render(): TemplateResult;
+    updated(changes: Map<keyof this, unknown>): void;
     disconnectedCallback(): void;
-    private __goTo;
+    private get __dialog();
     private __disconnectPageElement;
     private __connectPageElement;
 }

package/dist/elements/public/Pagination/Pagination.js

@@ -1,14 +1,13 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, html, css } from 'lit-element';
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { ResponsiveMixin } from "../../../mixins/responsive.js";
+import { InferrableMixin } from "../../../mixins/inferrable.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
-import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { classMap } from "../../../utils/class-map.js";
+import { NucleonElement } from "../NucleonElement/NucleonElement.js";
 import get from 'lodash-es/get';
-import { InferrableMixin } from "../../../mixins/inferrable.js";
 const NS = 'pagination';
-const Base = ResponsiveMixin(ConfigurableMixin(ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement), NS))));
+const Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(ResponsiveMixin(InferrableMixin(LitElement)), NS)));
 /**
  * Helper element that adds pagination controls to elements
  * representing Hypermedia API collection pages. Works with NucleonElement instances only.
@@ -27,125 +26,247 @@ const Base = ResponsiveMixin(ConfigurableMixin(ThemeableMixin(TranslatableMixin(
 export class Pagination extends Base {
     constructor() {
         super(...arguments);
+        this.__handlePageElementUpdate = () => this.requestUpdate();
+        this.__handleScrollAndResize = () => {
+            var _a;
+            (_a = this.renderRoot.querySelector('dialog')) === null || _a === void 0 ? void 0 : _a.close();
+        };
         this.__pageElement = null;
-        this.__rerender = () => this.requestUpdate();
+        this.__customPage = 1;
         this.__first = '';
+        this.__limit = 20;
+        this.__page = 1;
     }
     static get properties() {
         return {
             ...super.properties,
             first: { type: String },
             __pageElement: { attribute: false },
+            __customPage: { attribute: false },
+            __first: { attribute: false },
+            __limit: { attribute: false },
+            __page: { attribute: false },
         };
     }
-    /** URL of the first page of the colletion. */
+    static get styles() {
+        return [
+            super.styles,
+            css `dialog{
+  --position-bottom:translate(-100%, var(--lumo-space-m));
+  --position-top:translate(calc(-100% - 1px), calc(-100% - var(--lumo-space-m) - 1px));
+  border-radius:calc(var(--lumo-border-radius-m) + 1px);
+}
+
+dialog::backdrop{
+  background:transparent;
+}
+      `,
+        ];
+    }
+    /** URL of the first page of the collection. */
     get first() {
         return this.__first;
     }
     set first(newValue) {
+        var _a;
         this.__first = newValue;
-        if (this.__pageElement)
-            this.__pageElement.href = newValue;
+        this.__page = 1;
+        try {
+            const url = new URL(newValue);
+            const limit = parseInt((_a = url.searchParams.get('limit')) !== null && _a !== void 0 ? _a : '');
+            this.__limit = Number.isNaN(limit) || limit < 1 || limit > 200 ? 20 : limit;
+        }
+        catch (_b) {
+            this.__limit = 20;
+        }
     }
     connectedCallback() {
         super.connectedCallback();
         this.__connectPageElement();
+        addEventListener('scroll', this.__handleScrollAndResize);
+        addEventListener('resize', this.__handleScrollAndResize);
     }
     render() {
         var _a;
         const data = (_a = this.__pageElement) === null || _a === void 0 ? void 0 : _a.data;
-        const { disabled, lang, ns } = this;
         const returnedItemsValue = Number(get(data, 'returned_items'));
         const returnedItems = Number.isNaN(returnedItemsValue) ? 0 : returnedItemsValue;
         const totalValue = Number(get(data, 'total_items'));
         const total = Number.isNaN(totalValue) ? 0 : totalValue;
+        const limitOptions = [20, 50, 100, 150, 200];
+        const maxPageLinks = 5;
         const offsetValue = Number(get(data, 'offset'));
         const offset = Number.isNaN(offsetValue) ? 0 : offsetValue;
-        const canGoBack = !disabled && offset > 0;
-        const canGoForth = !disabled && offset + returnedItems < total;
-        const labelClass = 'sr-only sm-not-sr-only';
-        const from = offset + 1;
-        const to = offset + returnedItems;
+        const pages = total && this.__limit ? Math.ceil(total / this.__limit) : 0;
         return html `
       <slot @slotchange=${this.__connectPageElement}></slot>
 
       ${offset > 0 || offset + returnedItems < total
             ? html `
-            <div
-              class="mt-s grid gap-s items-center -mx-xs"
-              style="grid-template-columns: 1fr auto 1fr"
-            >
-              <div class="flex items-center space-x-s">
-                <vaadin-button
-                  data-testid="first"
-                  theme="contrast tertiary-inline"
-                  ?disabled=${!canGoBack}
-                  @click=${() => this.__goTo('first')}
-                >
-                  <iron-icon class="icon-inline text-s" icon="icons:first-page"></iron-icon>
-                  <foxy-i18n class=${labelClass} lang=${lang} key="first" ns=${ns}></foxy-i18n>
-                </vaadin-button>
+            <div class="flex items-center gap-xs mt-s">
+              <label class="text-tertiary" for="limit">
+                <foxy-i18n infer="" key="per_page"></foxy-i18n>
+              </label>
 
-                <vaadin-button
-                  data-testid="prev"
-                  theme="contrast tertiary-inline"
-                  ?disabled=${!canGoBack}
-                  @click=${() => this.__goTo('prev')}
-                >
-                  <iron-icon class="icon-inline text-s" icon="icons:chevron-left"></iron-icon>
-                  <foxy-i18n class=${labelClass} lang=${lang} key="previous" ns=${ns}></foxy-i18n>
-                </vaadin-button>
-              </div>
-
-              <foxy-i18n
-                options=${JSON.stringify({ total, from, to })}
-                class=${classMap({
-                'flex-1 text-xs text-tertiary text-center leading-xs truncate': true,
-                'opacity-0': !data,
-            })}
-                lang=${lang}
-                key="pagination"
-                ns=${ns}
+              <select
+                class="mr-auto cursor-pointer appearance-none bg-transparent rounded-s font-medium px-xs transition-opacity hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50"
+                id="limit"
+                ?disabled=${this.disabled}
+                @change=${(evt) => {
+                this.__limit = parseInt(evt.currentTarget.value);
+                this.__page = 1;
+            }}
               >
-              </foxy-i18n>
+                ${limitOptions.includes(this.__limit)
+                ? ''
+                : html `<option value=${this.__limit} selected>${this.__limit}</option>`}
+                ${limitOptions.map(option => html `
+                      <option value=${option} ?selected=${option === this.__limit}>
+                        ${option}
+                      </option>
+                    `)}
+              </select>
 
-              <div class="flex items-center justify-end space-x-s">
-                <vaadin-button
-                  data-testid="next"
-                  theme="contrast tertiary-inline"
-                  ?disabled=${!canGoForth}
-                  @click=${() => this.__goTo('next')}
-                >
-                  <foxy-i18n class=${labelClass} lang=${lang} key="next" ns=${ns}></foxy-i18n>
-                  <iron-icon class="icon-inline text-s" icon="icons:chevron-right"></iron-icon>
-                </vaadin-button>
+              <foxy-i18n class="text-tertiary sr-only sm-not-sr-only" infer="" key="jump_to">
+              </foxy-i18n>
 
-                <vaadin-button
-                  data-testid="last"
-                  theme="contrast tertiary-inline"
-                  ?disabled=${!canGoForth}
-                  @click=${() => this.__goTo('last')}
-                >
-                  <foxy-i18n class=${labelClass} lang=${lang} key="last" ns=${ns}></foxy-i18n>
-                  <iron-icon class="icon-inline text-s" icon="icons:last-page"></iron-icon>
-                </vaadin-button>
-              </div>
+              ${new Array(pages).fill('').map((_, pageIndex) => {
+                if (!(pageIndex < maxPageLinks + 1 || pageIndex === pages - 1))
+                    return;
+                const isEllipsis = pageIndex === maxPageLinks && pages > maxPageLinks + 2;
+                const isCurrentPage = this.__page === pageIndex + 1;
+                return html `
+                  <vaadin-button
+                    data-testclass="page-link"
+                    theme="tertiary-inline contrast"
+                    class="relative px-xs ${pageIndex === pages - 1 ? '-mr-xs' : ''}"
+                    ?disabled=${this.disabled || (isCurrentPage && !isEllipsis)}
+                    @click=${(evt) => {
+                    if (isEllipsis) {
+                        const dialog = this.__dialog;
+                        dialog.showModal();
+                        const elementRight = this.getBoundingClientRect().right;
+                        dialog.style.margin = `${evt.clientY}px auto auto ${elementRight}px`;
+                        const dialogBottom = dialog.getBoundingClientRect().bottom;
+                        const dialogPosition = dialogBottom > innerHeight ? 'top' : 'bottom';
+                        dialog.style.transform = `var(--position-${dialogPosition})`;
+                    }
+                    else {
+                        this.__page = pageIndex + 1;
+                    }
+                }}
+                  >
+                    ${isEllipsis
+                    ? this.__page > maxPageLinks && this.__page !== pages
+                        ? html `
+                            <span
+                              class="inline-block transform origin-top scale-50"
+                              style="--tw-translate-y: 0.1em;"
+                            >
+                              ${this.__page}
+                            </span>
+                            <span class="absolute inset-x-0 bottom-0">...</span>
+                          `
+                        : '...'
+                    : pageIndex + 1}
+                  </vaadin-button>
+                `;
+            })}
             </div>
           `
             : ''}
+
+      <dialog
+        class="p-0 shadow-m bg-transparent"
+        @click=${(evt) => {
+            const dialog = evt.currentTarget;
+            const dialogBox = dialog.getBoundingClientRect();
+            const clickedInsideDialog = dialogBox.top <= evt.clientY &&
+                evt.clientY <= dialogBox.top + dialogBox.height &&
+                dialogBox.left <= evt.clientX &&
+                evt.clientX <= dialogBox.left + dialogBox.width;
+            if (!clickedInsideDialog)
+                dialog.close();
+        }}
+      >
+        <foxy-internal-summary-control
+          helper-text=""
+          label=""
+          infer=""
+          class="bg-base rounded border border-base"
+          style="width: 18rem"
+        >
+          <foxy-internal-number-control
+            placeholder="1"
+            helper-text=""
+            layout="summary-item"
+            label=${this.t('page_number')}
+            infer=""
+            step="1"
+            min="1"
+            max=${pages}
+            .getValue=${() => this.__customPage}
+            .setValue=${(value) => (this.__customPage = value || 1)}
+            @keydown=${(evt) => {
+            var _a;
+            if (evt.key === 'Enter') {
+                this.__page = this.__customPage;
+                (_a = this.__dialog) === null || _a === void 0 ? void 0 : _a.close();
+            }
+        }}
+          >
+          </foxy-internal-number-control>
+          <div>
+            <vaadin-button
+              theme="tertiary-inline"
+              ?disabled=${this.disabled}
+              @click=${() => {
+            var _a;
+            this.__page = this.__customPage;
+            (_a = this.__dialog) === null || _a === void 0 ? void 0 : _a.close();
+        }}
+            >
+              <foxy-i18n infer="" key="jump"></foxy-i18n>
+            </vaadin-button>
+          </div>
+        </foxy-internal-summary-control>
+      </dialog>
     `;
     }
+    updated(changes) {
+        super.updated(changes);
+        const triggerProps = ['__first', '__limit', '__page'];
+        if (!triggerProps.some(prop => changes.has(prop)))
+            return;
+        try {
+            const url = new URL(this.__first);
+            const limit = this.__limit;
+            const offset = this.__limit * (this.__page - 1);
+            url.searchParams.delete('limit');
+            url.searchParams.delete('offset');
+            if (limit)
+                url.searchParams.set('limit', limit.toString());
+            if (offset)
+                url.searchParams.set('offset', offset.toString());
+            if (this.__pageElement)
+                this.__pageElement.href = url.toString();
+        }
+        catch (_a) {
+            //
+        }
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.__disconnectPageElement();
+        removeEventListener('scroll', this.__handleScrollAndResize);
+        removeEventListener('resize', this.__handleScrollAndResize);
     }
-    __goTo(rel) {
-        var _a;
-        this.__pageElement.href = String(get((_a = this.__pageElement) === null || _a === void 0 ? void 0 : _a.data, `_links.${rel}.href`));
+    get __dialog() {
+        return this.renderRoot.querySelector('dialog');
     }
     __disconnectPageElement() {
         var _a;
-        (_a = this.__pageElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('update', this.__rerender);
+        (_a = this.__pageElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('update', this.__handlePageElementUpdate);
         this.__pageElement = null;
     }
     __connectPageElement() {
@@ -156,7 +277,7 @@ export class Pagination extends Base {
         const firstNucleonElement = assignedElements.find(el => el instanceof NucleonElement);
         if (firstNucleonElement) {
             this.__pageElement = firstNucleonElement;
-            this.__pageElement.addEventListener('update', this.__rerender);
+            this.__pageElement.addEventListener('update', this.__handlePageElementUpdate);
             this.__pageElement.href = this.first;
         }
     }