@foxy.io/elements 1.42.0-beta.5 → 1.42.0-beta.7

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

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css, svg } from 'lit-element';
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { ResponsiveMixin } from "../../../mixins/responsive.js";
@@ -52,8 +52,6 @@ export class Pagination extends Base {
         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);
 }
 
@@ -94,90 +92,89 @@ dialog::backdrop{
         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;
+        if (!limitOptions.includes(this.__limit))
+            limitOptions.unshift(this.__limit);
         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="flex items-center gap-xs mt-s">
-              <label class="text-tertiary" for="limit">
-                <foxy-i18n infer="" key="per_page"></foxy-i18n>
-              </label>
+      <div class="flex gap-m relative mt-s" ?hidden=${pages <= 1}>
+        <div class="absolute inset-0 flex items-center justify-center">
+          <vaadin-button
+            theme="tertiary-inline contrast"
+            ?disabled=${this.disabled}
+            @click=${(evt) => {
+            const dialog = this.__dialog;
+            const button = evt.currentTarget;
+            const buttonBox = button.getBoundingClientRect();
+            dialog.showModal();
+            const marginLeft = buttonBox.left + buttonBox.width / 2 - dialog.offsetWidth / 2;
+            dialog.style.margin = `calc(var(--lumo-space-xs) + ${buttonBox.bottom}px) auto auto ${marginLeft.toFixed(2)}px`;
+            if (dialog.getBoundingClientRect().bottom > window.innerHeight) {
+                dialog.style.margin = `auto auto calc(${(window.innerHeight - buttonBox.top).toFixed(2)}px + var(--lumo-space-xs)) ${marginLeft.toFixed(2)}px`;
+            }
+        }}
+          >
+            <foxy-i18n
+              infer=""
+              class="text-xs leading-none"
+              key="pagination"
+              .options=${{
+            total,
+            from: (this.__page - 1) * this.__limit + 1,
+            to: (this.__page - 1) * this.__limit + returnedItems,
+        }}
+            >
+            </foxy-i18n>
+          </vaadin-button>
+        </div>
+
+        <vaadin-button
+          theme="tertiary-inline contrast"
+          class="relative"
+          ?disabled=${this.disabled || this.__page === 1}
+          @click=${() => (this.__page = 1)}
+        >
+          ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="inline-block" style="width: 1em; height: 1em; transform: translate(-0.15em, -0.05em) scale(1.5)"><path fill-rule="evenodd" d="M4.72 9.47a.75.75 0 0 0 0 1.06l4.25 4.25a.75.75 0 1 0 1.06-1.06L6.31 10l3.72-3.72a.75.75 0 1 0-1.06-1.06L4.72 9.47Zm9.25-4.25L9.72 9.47a.75.75 0 0 0 0 1.06l4.25 4.25a.75.75 0 1 0 1.06-1.06L11.31 10l3.72-3.72a.75.75 0 0 0-1.06-1.06Z" clip-rule="evenodd" /></svg>`}
+          <foxy-i18n infer="" class="leading-none sr-only sm-not-sr-only" key="first"></foxy-i18n>
+        </vaadin-button>
 
-              <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;
-            }}
-              >
-                ${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>
+        <vaadin-button
+          theme="tertiary-inline contrast"
+          class="relative"
+          ?disabled=${this.disabled || this.__page === 1}
+          @click=${() => this.__page--}
+        >
+          ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="inline-block" style="width: 1em; height: 1em; transform: translate(-0.15em, -0.05em) scale(1.5)"><path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" /></svg>`}
+          <foxy-i18n infer="" class="leading-none sr-only sm-not-sr-only" key="previous">
+          </foxy-i18n>
+        </vaadin-button>
+
+        <div class="flex-1"></div>
 
-              <foxy-i18n class="text-tertiary sr-only sm-not-sr-only" infer="" key="jump_to">
-              </foxy-i18n>
+        <vaadin-button
+          theme="tertiary-inline contrast"
+          class="relative"
+          ?disabled=${this.disabled || this.__page >= pages}
+          @click=${() => this.__page++}
+        >
+          <foxy-i18n infer="" class="leading-none sr-only sm-not-sr-only" key="next"></foxy-i18n>
+          ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="inline-block" style="width: 1em; height: 1em; transform: translate(0.15em, -0.05em) scale(1.5)"><path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>`}
+        </vaadin-button>
 
-              ${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>
-          `
-            : ''}
+        <vaadin-button
+          theme="tertiary-inline contrast"
+          class="relative"
+          ?disabled=${this.disabled || this.__page >= pages}
+          @click=${() => (this.__page = pages)}
+        >
+          <foxy-i18n infer="" class="leading-none sr-only sm-not-sr-only" key="last"></foxy-i18n>
+          ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="inline-block" style="width: 1em; height: 1em; transform: translate(0.15em, -0.05em) scale(1.5)"><path fill-rule="evenodd" d="M15.28 9.47a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L13.69 10 9.97 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25ZM6.03 5.22l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L8.69 10 4.97 6.28a.75.75 0 0 1 1.06-1.06Z" clip-rule="evenodd" /></svg>`}
+        </vaadin-button>
+      </div>
 
       <dialog
-        class="p-0 shadow-m bg-transparent"
+        class="p-0 shadow-m bg-transparent focus-outline-none"
         @click=${(evt) => {
             const dialog = evt.currentTarget;
             const dialogBox = dialog.getBoundingClientRect();
@@ -196,6 +193,23 @@ dialog::backdrop{
           class="bg-base rounded border border-base"
           style="width: 18rem"
         >
+          <foxy-internal-select-control
+            placeholder=${this.t('select')}
+            helper-text=""
+            layout="summary-item"
+            label=${this.t('per_page')}
+            infer=""
+            .options=${limitOptions.map(value => ({ rawLabel: value, value }))}
+            .getValue=${() => this.__limit}
+            .setValue=${(value) => {
+            var _a;
+            (_a = this.__dialog) === null || _a === void 0 ? void 0 : _a.close();
+            this.__limit = value;
+            this.__page = 1;
+        }}
+          >
+          </foxy-internal-select-control>
+
           <foxy-internal-number-control
             placeholder="1"
             helper-text=""
@@ -207,28 +221,21 @@ dialog::backdrop{
             max=${pages}
             .getValue=${() => this.__customPage}
             .setValue=${(value) => (this.__customPage = value || 1)}
+            @blur=${() => {
+            var _a;
+            this.__page = this.__customPage;
+            (_a = this.__dialog) === null || _a === void 0 ? void 0 : _a.close();
+        }}
             @keydown=${(evt) => {
             var _a;
             if (evt.key === 'Enter') {
+                evt.preventDefault();
                 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>
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../../src/elements/public/Pagination/Pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult, CSSResultArray } from 'lit-element';\n\nimport { LitElement, html, css } from 'lit-element';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\n\nimport get from 'lodash-es/get';\n\nconst NS = 'pagination';\nconst Base = ConfigurableMixin(\n  ThemeableMixin(TranslatableMixin(ResponsiveMixin(InferrableMixin(LitElement)), NS))\n);\n\n/**\n * Helper element that adds pagination controls to elements\n * representing Hypermedia API collection pages. Works with NucleonElement instances only.\n * Page element **MUST** be a direct descendant of `foxy-pagination`.\n *\n * @example\n * ```html\n * <foxy-pagination first=\"https://demo.api/hapi/customers?limit=3\">\n *   <foxy-customers-table></foxy-customers-table>\n * </foxy-pagination>\n * ```\n *\n * @element foxy-pagination\n * @since 1.15.0\n */\nexport class Pagination extends Base {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      first: { type: String },\n      __pageElement: { attribute: false },\n      __customPage: { attribute: false },\n      __first: { attribute: false },\n      __limit: { attribute: false },\n      __page: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        dialog {\n          --position-bottom: translate(-100%, var(--lumo-space-m));\n          --position-top: translate(calc(-100% - 1px), calc(-100% - var(--lumo-space-m) - 1px));\n          border-radius: calc(var(--lumo-border-radius-m) + 1px);\n        }\n\n        dialog::backdrop {\n          background: transparent;\n        }\n      `,\n    ];\n  }\n\n  private readonly __handlePageElementUpdate = () => this.requestUpdate();\n\n  private readonly __handleScrollAndResize = () => {\n    this.renderRoot.querySelector('dialog')?.close();\n  };\n\n  private __pageElement: NucleonElement<any> | null = null;\n\n  private __customPage = 1;\n\n  private __first = '';\n\n  private __limit = 20;\n\n  private __page = 1;\n\n  /** URL of the first page of the collection. */\n  get first(): string {\n    return this.__first;\n  }\n\n  set first(newValue: string) {\n    this.__first = newValue;\n    this.__page = 1;\n\n    try {\n      const url = new URL(newValue);\n      const limit = parseInt(url.searchParams.get('limit') ?? '');\n      this.__limit = Number.isNaN(limit) || limit < 1 || limit > 200 ? 20 : limit;\n    } catch {\n      this.__limit = 20;\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.__connectPageElement();\n    addEventListener('scroll', this.__handleScrollAndResize);\n    addEventListener('resize', this.__handleScrollAndResize);\n  }\n\n  render(): TemplateResult {\n    const data = this.__pageElement?.data;\n\n    const returnedItemsValue = Number(get(data, 'returned_items'));\n    const returnedItems = Number.isNaN(returnedItemsValue) ? 0 : returnedItemsValue;\n\n    const totalValue = Number(get(data, 'total_items'));\n    const total = Number.isNaN(totalValue) ? 0 : totalValue;\n\n    const limitOptions = [20, 50, 100, 150, 200];\n    const maxPageLinks = 5;\n    const offsetValue = Number(get(data, 'offset'));\n    const offset = Number.isNaN(offsetValue) ? 0 : offsetValue;\n    const pages = total && this.__limit ? Math.ceil(total / this.__limit) : 0;\n\n    return html`\n      <slot @slotchange=${this.__connectPageElement}></slot>\n\n      ${offset > 0 || offset + returnedItems < total\n        ? html`\n            <div class=\"flex items-center gap-xs mt-s\">\n              <label class=\"text-tertiary\" for=\"limit\">\n                <foxy-i18n infer=\"\" key=\"per_page\"></foxy-i18n>\n              </label>\n\n              <select\n                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\"\n                id=\"limit\"\n                ?disabled=${this.disabled}\n                @change=${(evt: Event) => {\n                  this.__limit = parseInt((evt.currentTarget as HTMLSelectElement).value);\n                  this.__page = 1;\n                }}\n              >\n                ${limitOptions.includes(this.__limit)\n                  ? ''\n                  : html`<option value=${this.__limit} selected>${this.__limit}</option>`}\n                ${limitOptions.map(\n                  option =>\n                    html`\n                      <option value=${option} ?selected=${option === this.__limit}>\n                        ${option}\n                      </option>\n                    `\n                )}\n              </select>\n\n              <foxy-i18n class=\"text-tertiary sr-only sm-not-sr-only\" infer=\"\" key=\"jump_to\">\n              </foxy-i18n>\n\n              ${new Array(pages).fill('').map((_, pageIndex) => {\n                if (!(pageIndex < maxPageLinks + 1 || pageIndex === pages - 1)) return;\n\n                const isEllipsis = pageIndex === maxPageLinks && pages > maxPageLinks + 2;\n                const isCurrentPage = this.__page === pageIndex + 1;\n\n                return html`\n                  <vaadin-button\n                    data-testclass=\"page-link\"\n                    theme=\"tertiary-inline contrast\"\n                    class=\"relative px-xs ${pageIndex === pages - 1 ? '-mr-xs' : ''}\"\n                    ?disabled=${this.disabled || (isCurrentPage && !isEllipsis)}\n                    @click=${(evt: MouseEvent) => {\n                      if (isEllipsis) {\n                        const dialog = this.__dialog as HTMLDialogElement;\n                        dialog.showModal();\n\n                        const elementRight = this.getBoundingClientRect().right;\n                        dialog.style.margin = `${evt.clientY}px auto auto ${elementRight}px`;\n\n                        const dialogBottom = dialog.getBoundingClientRect().bottom;\n                        const dialogPosition = dialogBottom > innerHeight ? 'top' : 'bottom';\n                        dialog.style.transform = `var(--position-${dialogPosition})`;\n                      } else {\n                        this.__page = pageIndex + 1;\n                      }\n                    }}\n                  >\n                    ${isEllipsis\n                      ? this.__page > maxPageLinks && this.__page !== pages\n                        ? html`\n                            <span\n                              class=\"inline-block transform origin-top scale-50\"\n                              style=\"--tw-translate-y: 0.1em;\"\n                            >\n                              ${this.__page}\n                            </span>\n                            <span class=\"absolute inset-x-0 bottom-0\">...</span>\n                          `\n                        : '...'\n                      : pageIndex + 1}\n                  </vaadin-button>\n                `;\n              })}\n            </div>\n          `\n        : ''}\n\n      <dialog\n        class=\"p-0 shadow-m bg-transparent\"\n        @click=${(evt: MouseEvent) => {\n          const dialog = evt.currentTarget as HTMLDialogElement;\n          const dialogBox = dialog.getBoundingClientRect();\n          const clickedInsideDialog =\n            dialogBox.top <= evt.clientY &&\n            evt.clientY <= dialogBox.top + dialogBox.height &&\n            dialogBox.left <= evt.clientX &&\n            evt.clientX <= dialogBox.left + dialogBox.width;\n\n          if (!clickedInsideDialog) dialog.close();\n        }}\n      >\n        <foxy-internal-summary-control\n          helper-text=\"\"\n          label=\"\"\n          infer=\"\"\n          class=\"bg-base rounded border border-base\"\n          style=\"width: 18rem\"\n        >\n          <foxy-internal-number-control\n            placeholder=\"1\"\n            helper-text=\"\"\n            layout=\"summary-item\"\n            label=${this.t('page_number')}\n            infer=\"\"\n            step=\"1\"\n            min=\"1\"\n            max=${pages}\n            .getValue=${() => this.__customPage}\n            .setValue=${(value: number) => (this.__customPage = value || 1)}\n            @keydown=${(evt: KeyboardEvent) => {\n              if (evt.key === 'Enter') {\n                this.__page = this.__customPage;\n                this.__dialog?.close();\n              }\n            }}\n          >\n          </foxy-internal-number-control>\n          <div>\n            <vaadin-button\n              theme=\"tertiary-inline\"\n              ?disabled=${this.disabled}\n              @click=${() => {\n                this.__page = this.__customPage;\n                this.__dialog?.close();\n              }}\n            >\n              <foxy-i18n infer=\"\" key=\"jump\"></foxy-i18n>\n            </vaadin-button>\n          </div>\n        </foxy-internal-summary-control>\n      </dialog>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n\n    const triggerProps = ['__first', '__limit', '__page'] as (keyof this)[];\n    if (!triggerProps.some(prop => changes.has(prop))) return;\n\n    try {\n      const url = new URL(this.__first);\n      const limit = this.__limit;\n      const offset = this.__limit * (this.__page - 1);\n\n      url.searchParams.delete('limit');\n      url.searchParams.delete('offset');\n\n      if (limit) url.searchParams.set('limit', limit.toString());\n      if (offset) url.searchParams.set('offset', offset.toString());\n      if (this.__pageElement) this.__pageElement.href = url.toString();\n    } catch {\n      //\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__disconnectPageElement();\n    removeEventListener('scroll', this.__handleScrollAndResize);\n    removeEventListener('resize', this.__handleScrollAndResize);\n  }\n\n  private get __dialog() {\n    return this.renderRoot.querySelector('dialog');\n  }\n\n  private __disconnectPageElement() {\n    this.__pageElement?.removeEventListener('update', this.__handlePageElementUpdate);\n    this.__pageElement = null;\n  }\n\n  private __connectPageElement() {\n    this.__disconnectPageElement();\n\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot');\n    const assignedElements = slot?.assignedElements() ?? [];\n    const firstNucleonElement = assignedElements.find(el => el instanceof NucleonElement) as\n      | NucleonElement<any>\n      | undefined;\n\n    if (firstNucleonElement) {\n      this.__pageElement = firstNucleonElement;\n      this.__pageElement.addEventListener('update', this.__handlePageElementUpdate);\n      this.__pageElement.href = this.first;\n    }\n  }\n}\n"]}
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../../src/elements/public/Pagination/Pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult, CSSResultArray } from 'lit-element';\n\nimport { LitElement, html, css, svg } from 'lit-element';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\n\nimport get from 'lodash-es/get';\n\nconst NS = 'pagination';\nconst Base = ConfigurableMixin(\n  ThemeableMixin(TranslatableMixin(ResponsiveMixin(InferrableMixin(LitElement)), NS))\n);\n\n/**\n * Helper element that adds pagination controls to elements\n * representing Hypermedia API collection pages. Works with NucleonElement instances only.\n * Page element **MUST** be a direct descendant of `foxy-pagination`.\n *\n * @example\n * ```html\n * <foxy-pagination first=\"https://demo.api/hapi/customers?limit=3\">\n *   <foxy-customers-table></foxy-customers-table>\n * </foxy-pagination>\n * ```\n *\n * @element foxy-pagination\n * @since 1.15.0\n */\nexport class Pagination extends Base {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      first: { type: String },\n      __pageElement: { attribute: false },\n      __customPage: { attribute: false },\n      __first: { attribute: false },\n      __limit: { attribute: false },\n      __page: { attribute: false },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        dialog {\n          border-radius: calc(var(--lumo-border-radius-m) + 1px);\n        }\n\n        dialog::backdrop {\n          background: transparent;\n        }\n      `,\n    ];\n  }\n\n  private readonly __handlePageElementUpdate = () => this.requestUpdate();\n\n  private readonly __handleScrollAndResize = () => {\n    this.renderRoot.querySelector('dialog')?.close();\n  };\n\n  private __pageElement: NucleonElement<any> | null = null;\n\n  private __customPage = 1;\n\n  private __first = '';\n\n  private __limit = 20;\n\n  private __page = 1;\n\n  /** URL of the first page of the collection. */\n  get first(): string {\n    return this.__first;\n  }\n\n  set first(newValue: string) {\n    this.__first = newValue;\n    this.__page = 1;\n\n    try {\n      const url = new URL(newValue);\n      const limit = parseInt(url.searchParams.get('limit') ?? '');\n      this.__limit = Number.isNaN(limit) || limit < 1 || limit > 200 ? 20 : limit;\n    } catch {\n      this.__limit = 20;\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.__connectPageElement();\n    addEventListener('scroll', this.__handleScrollAndResize);\n    addEventListener('resize', this.__handleScrollAndResize);\n  }\n\n  render(): TemplateResult {\n    const data = this.__pageElement?.data;\n\n    const returnedItemsValue = Number(get(data, 'returned_items'));\n    const returnedItems = Number.isNaN(returnedItemsValue) ? 0 : returnedItemsValue;\n\n    const totalValue = Number(get(data, 'total_items'));\n    const total = Number.isNaN(totalValue) ? 0 : totalValue;\n\n    const limitOptions = [20, 50, 100, 150, 200];\n    if (!limitOptions.includes(this.__limit)) limitOptions.unshift(this.__limit);\n    const pages = total && this.__limit ? Math.ceil(total / this.__limit) : 0;\n\n    return html`\n      <slot @slotchange=${this.__connectPageElement}></slot>\n\n      <div class=\"flex gap-m relative mt-s\" ?hidden=${pages <= 1}>\n        <div class=\"absolute inset-0 flex items-center justify-center\">\n          <vaadin-button\n            theme=\"tertiary-inline contrast\"\n            ?disabled=${this.disabled}\n            @click=${(evt: CustomEvent) => {\n              const dialog = this.__dialog as HTMLDialogElement;\n              const button = evt.currentTarget as HTMLElement;\n              const buttonBox = button.getBoundingClientRect();\n\n              dialog.showModal();\n              const marginLeft = buttonBox.left + buttonBox.width / 2 - dialog.offsetWidth / 2;\n              dialog.style.margin = `calc(var(--lumo-space-xs) + ${\n                buttonBox.bottom\n              }px) auto auto ${marginLeft.toFixed(2)}px`;\n\n              if (dialog.getBoundingClientRect().bottom > window.innerHeight) {\n                dialog.style.margin = `auto auto calc(${(\n                  window.innerHeight - buttonBox.top\n                ).toFixed(2)}px + var(--lumo-space-xs)) ${marginLeft.toFixed(2)}px`;\n              }\n            }}\n          >\n            <foxy-i18n\n              infer=\"\"\n              class=\"text-xs leading-none\"\n              key=\"pagination\"\n              .options=${{\n                total,\n                from: (this.__page - 1) * this.__limit + 1,\n                to: (this.__page - 1) * this.__limit + returnedItems,\n              }}\n            >\n            </foxy-i18n>\n          </vaadin-button>\n        </div>\n\n        <vaadin-button\n          theme=\"tertiary-inline contrast\"\n          class=\"relative\"\n          ?disabled=${this.disabled || this.__page === 1}\n          @click=${() => (this.__page = 1)}\n        >\n          ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"inline-block\" style=\"width: 1em; height: 1em; transform: translate(-0.15em, -0.05em) scale(1.5)\"><path fill-rule=\"evenodd\" d=\"M4.72 9.47a.75.75 0 0 0 0 1.06l4.25 4.25a.75.75 0 1 0 1.06-1.06L6.31 10l3.72-3.72a.75.75 0 1 0-1.06-1.06L4.72 9.47Zm9.25-4.25L9.72 9.47a.75.75 0 0 0 0 1.06l4.25 4.25a.75.75 0 1 0 1.06-1.06L11.31 10l3.72-3.72a.75.75 0 0 0-1.06-1.06Z\" clip-rule=\"evenodd\" /></svg>`}\n          <foxy-i18n infer=\"\" class=\"leading-none sr-only sm-not-sr-only\" key=\"first\"></foxy-i18n>\n        </vaadin-button>\n\n        <vaadin-button\n          theme=\"tertiary-inline contrast\"\n          class=\"relative\"\n          ?disabled=${this.disabled || this.__page === 1}\n          @click=${() => this.__page--}\n        >\n          ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"inline-block\" style=\"width: 1em; height: 1em; transform: translate(-0.15em, -0.05em) scale(1.5)\"><path fill-rule=\"evenodd\" d=\"M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\" clip-rule=\"evenodd\" /></svg>`}\n          <foxy-i18n infer=\"\" class=\"leading-none sr-only sm-not-sr-only\" key=\"previous\">\n          </foxy-i18n>\n        </vaadin-button>\n\n        <div class=\"flex-1\"></div>\n\n        <vaadin-button\n          theme=\"tertiary-inline contrast\"\n          class=\"relative\"\n          ?disabled=${this.disabled || this.__page >= pages}\n          @click=${() => this.__page++}\n        >\n          <foxy-i18n infer=\"\" class=\"leading-none sr-only sm-not-sr-only\" key=\"next\"></foxy-i18n>\n          ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"inline-block\" style=\"width: 1em; height: 1em; transform: translate(0.15em, -0.05em) scale(1.5)\"><path fill-rule=\"evenodd\" d=\"M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" /></svg>`}\n        </vaadin-button>\n\n        <vaadin-button\n          theme=\"tertiary-inline contrast\"\n          class=\"relative\"\n          ?disabled=${this.disabled || this.__page >= pages}\n          @click=${() => (this.__page = pages)}\n        >\n          <foxy-i18n infer=\"\" class=\"leading-none sr-only sm-not-sr-only\" key=\"last\"></foxy-i18n>\n          ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"inline-block\" style=\"width: 1em; height: 1em; transform: translate(0.15em, -0.05em) scale(1.5)\"><path fill-rule=\"evenodd\" d=\"M15.28 9.47a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L13.69 10 9.97 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25ZM6.03 5.22l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L8.69 10 4.97 6.28a.75.75 0 0 1 1.06-1.06Z\" clip-rule=\"evenodd\" /></svg>`}\n        </vaadin-button>\n      </div>\n\n      <dialog\n        class=\"p-0 shadow-m bg-transparent focus-outline-none\"\n        @click=${(evt: MouseEvent) => {\n          const dialog = evt.currentTarget as HTMLDialogElement;\n          const dialogBox = dialog.getBoundingClientRect();\n          const clickedInsideDialog =\n            dialogBox.top <= evt.clientY &&\n            evt.clientY <= dialogBox.top + dialogBox.height &&\n            dialogBox.left <= evt.clientX &&\n            evt.clientX <= dialogBox.left + dialogBox.width;\n\n          if (!clickedInsideDialog) dialog.close();\n        }}\n      >\n        <foxy-internal-summary-control\n          helper-text=\"\"\n          label=\"\"\n          infer=\"\"\n          class=\"bg-base rounded border border-base\"\n          style=\"width: 18rem\"\n        >\n          <foxy-internal-select-control\n            placeholder=${this.t('select')}\n            helper-text=\"\"\n            layout=\"summary-item\"\n            label=${this.t('per_page')}\n            infer=\"\"\n            .options=${limitOptions.map(value => ({ rawLabel: value, value }))}\n            .getValue=${() => this.__limit}\n            .setValue=${(value: number) => {\n              this.__dialog?.close();\n              this.__limit = value;\n              this.__page = 1;\n            }}\n          >\n          </foxy-internal-select-control>\n\n          <foxy-internal-number-control\n            placeholder=\"1\"\n            helper-text=\"\"\n            layout=\"summary-item\"\n            label=${this.t('page_number')}\n            infer=\"\"\n            step=\"1\"\n            min=\"1\"\n            max=${pages}\n            .getValue=${() => this.__customPage}\n            .setValue=${(value: number) => (this.__customPage = value || 1)}\n            @blur=${() => {\n              this.__page = this.__customPage;\n              this.__dialog?.close();\n            }}\n            @keydown=${(evt: KeyboardEvent) => {\n              if (evt.key === 'Enter') {\n                evt.preventDefault();\n                this.__page = this.__customPage;\n                this.__dialog?.close();\n              }\n            }}\n          >\n          </foxy-internal-number-control>\n        </foxy-internal-summary-control>\n      </dialog>\n    `;\n  }\n\n  updated(changes: Map<keyof this, unknown>): void {\n    super.updated(changes);\n\n    const triggerProps = ['__first', '__limit', '__page'] as (keyof this)[];\n    if (!triggerProps.some(prop => changes.has(prop))) return;\n\n    try {\n      const url = new URL(this.__first);\n      const limit = this.__limit;\n      const offset = this.__limit * (this.__page - 1);\n\n      url.searchParams.delete('limit');\n      url.searchParams.delete('offset');\n\n      if (limit) url.searchParams.set('limit', limit.toString());\n      if (offset) url.searchParams.set('offset', offset.toString());\n      if (this.__pageElement) this.__pageElement.href = url.toString();\n    } catch {\n      //\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__disconnectPageElement();\n    removeEventListener('scroll', this.__handleScrollAndResize);\n    removeEventListener('resize', this.__handleScrollAndResize);\n  }\n\n  private get __dialog() {\n    return this.renderRoot.querySelector('dialog');\n  }\n\n  private __disconnectPageElement() {\n    this.__pageElement?.removeEventListener('update', this.__handlePageElementUpdate);\n    this.__pageElement = null;\n  }\n\n  private __connectPageElement() {\n    this.__disconnectPageElement();\n\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot');\n    const assignedElements = slot?.assignedElements() ?? [];\n    const firstNucleonElement = assignedElements.find(el => el instanceof NucleonElement) as\n      | NucleonElement<any>\n      | undefined;\n\n    if (firstNucleonElement) {\n      this.__pageElement = firstNucleonElement;\n      this.__pageElement.addEventListener('update', this.__handlePageElementUpdate);\n      this.__pageElement.href = this.first;\n    }\n  }\n}\n"]}

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

@@ -1,6 +1,7 @@
 import '@vaadin/vaadin-button';
 import '../../internal/InternalSummaryControl/index';
 import '../../internal/InternalNumberControl/index';
+import '../../internal/InternalSelectControl/index';
 import '../I18n/index';
 import { Pagination } from './Pagination';
 export { Pagination };

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

@@ -1,6 +1,7 @@
 import '@vaadin/vaadin-button';
 import "../../internal/InternalSummaryControl/index.js";
 import "../../internal/InternalNumberControl/index.js";
+import "../../internal/InternalSelectControl/index.js";
 import "../I18n/index.js";
 import { Pagination } from "./Pagination.js";
 customElements.define('foxy-pagination', Pagination);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/Pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,wDAAqD;AACrD,uDAAoD;AAEpD,0BAAuB;AAEvB,OAAO,EAAE,UAAU,EAAE,wBAAqB;AAE1C,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;AAErD,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\n\nimport '../../internal/InternalSummaryControl/index';\nimport '../../internal/InternalNumberControl/index';\n\nimport '../I18n/index';\n\nimport { Pagination } from './Pagination';\n\ncustomElements.define('foxy-pagination', Pagination);\n\nexport { Pagination };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/Pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,wDAAqD;AACrD,uDAAoD;AACpD,uDAAoD;AAEpD,0BAAuB;AAEvB,OAAO,EAAE,UAAU,EAAE,wBAAqB;AAE1C,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;AAErD,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\n\nimport '../../internal/InternalSummaryControl/index';\nimport '../../internal/InternalNumberControl/index';\nimport '../../internal/InternalSelectControl/index';\n\nimport '../I18n/index';\n\nimport { Pagination } from './Pagination';\n\ncustomElements.define('foxy-pagination', Pagination);\n\nexport { Pagination };\n"]}

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

@@ -36,7 +36,6 @@ export declare class PaymentsApiPaymentMethodForm extends Base<Data> {
     private readonly __threeDSecureToggleGetValue;
     private readonly __threeDSecureToggleSetValue;
     private readonly __threeDSecureToggleOptions;
-    private readonly __cardVerificationGetValue;
     private readonly __cardVerificationOptions;
     get hiddenSelector(): BooleanSelector;
     renderHeader(...params: Parameters<InternalForm<Data>['renderHeader']>): TemplateResult;

package/dist/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.js

@@ -68,10 +68,6 @@ export class PaymentsApiPaymentMethodForm extends Base {
             { value: 'all_cards', label: 'option_all_cards' },
             { value: 'maestro_only', label: 'option_maestro_only' },
         ];
-        this.__cardVerificationGetValue = () => {
-            // @ts-expect-error SDK typings are incomplete
-            return this.form.card_verification || 'disabled';
-        };
         this.__cardVerificationOptions = [
             { label: 'option_disabled', value: 'disabled' },
             { label: 'option_enabled_automatically', value: 'enabled_automatically' },
@@ -268,7 +264,7 @@ export class PaymentsApiPaymentMethodForm extends Base {
     `;
     }
     __renderPaymentMethodConfig() {
-        var _a, _b, _c;
+        var _a, _b;
         const oauthGateways = [
             'stripe_connect',
             'square_up',
@@ -330,23 +326,12 @@ export class PaymentsApiPaymentMethodForm extends Base {
             : ''}
             `
             : ''}
-        ${
-        // @ts-expect-error SDK typings are incomplete
-        ((_c = this.form.helper) === null || _c === void 0 ? void 0 : _c.supports_card_verification) ? html `
-                <foxy-internal-select-control
-                  layout="summary-item"
-                  infer="card-verification"
-                  .getValue=${this.__cardVerificationGetValue}
-                  .options=${this.__cardVerificationOptions}
-                >
-                </foxy-internal-select-control>
-              `
-            : ''}
       </foxy-internal-summary-control>
 
       ${['live', 'test'].map((type, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-            const prefix = index === 0 ? '' : `${type}-`;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            const propertyPrefix = index === 0 ? '' : `${type}_`;
+            const inferPrefix = index === 0 ? '' : `${type}-`;
             const blocks = index === 0 ? this.__liveBlocks : this.__testBlocks;
             const scope = `${type}-group`;
             if (type === 'live' && !((_a = this.__storeLoader) === null || _a === void 0 ? void 0 : _a.data))
@@ -370,68 +355,96 @@ export class PaymentsApiPaymentMethodForm extends Base {
             return html `
           <foxy-internal-summary-control
             helper-text=${ifDefined(showInactiveSetText ? this.t(`${scope}.helper_text_inactive`) : void 0)}
-            layout="details"
+            layout="section"
             label=${ifDefined(showInactiveSetText ? this.t(`${scope}.label_inactive`) : void 0)}
             infer=${scope}
-            ?open=${!showInactiveSetText}
           >
-            ${((_k = this.form.helper) === null || _k === void 0 ? void 0 : _k.id_description) ? html `
-                  <foxy-internal-text-control
-                    placeholder=${this.t('default_additional_field_placeholder')}
-                    helper-text=""
-                    layout="summary-item"
-                    label=${this.form.helper.id_description}
-                    infer="${prefix}account-id"
-                  >
-                  </foxy-internal-text-control>
-                `
+            <foxy-internal-summary-control infer="" label="" helper-text="">
+              ${((_k = this.form.helper) === null || _k === void 0 ? void 0 : _k.id_description) ? html `
+                    <foxy-internal-text-control
+                      placeholder=${this.t('default_additional_field_placeholder')}
+                      helper-text=""
+                      layout="summary-item"
+                      label=${this.form.helper.id_description}
+                      infer="${inferPrefix}account-id"
+                    >
+                    </foxy-internal-text-control>
+                  `
+                : ''}
+              ${((_l = this.form.helper) === null || _l === void 0 ? void 0 : _l.third_party_key_description) ? html `
+                    <foxy-internal-password-control
+                      placeholder=${this.t('default_additional_field_placeholder')}
+                      helper-text=""
+                      layout="summary-item"
+                      label=${this.form.helper.third_party_key_description}
+                      infer="${inferPrefix}third-party-key"
+                    >
+                    </foxy-internal-password-control>
+                  `
                 : ''}
-            ${((_l = this.form.helper) === null || _l === void 0 ? void 0 : _l.third_party_key_description) ? html `
-                  <foxy-internal-password-control
-                    placeholder=${this.t('default_additional_field_placeholder')}
-                    helper-text=""
-                    layout="summary-item"
-                    label=${this.form.helper.third_party_key_description}
-                    infer="${prefix}third-party-key"
-                  >
-                  </foxy-internal-password-control>
-                `
+              ${((_m = this.form.helper) === null || _m === void 0 ? void 0 : _m.key_description) ? html `
+                    <foxy-internal-password-control
+                      placeholder=${this.t('default_additional_field_placeholder')}
+                      layout="summary-item"
+                      helper-text=""
+                      label=${this.form.helper.key_description}
+                      infer="${inferPrefix}account-key"
+                    >
+                    </foxy-internal-password-control>
+                  `
                 : ''}
-            ${((_m = this.form.helper) === null || _m === void 0 ? void 0 : _m.key_description) ? html `
-                  <foxy-internal-password-control
-                    placeholder=${this.t('default_additional_field_placeholder')}
-                    layout="summary-item"
-                    helper-text=""
-                    label=${this.form.helper.key_description}
-                    infer="${prefix}account-key"
-                  >
-                  </foxy-internal-password-control>
-                `
+              ${blocks.map(block => this.__renderBlock(block))}
+              ${
+            // @ts-expect-error SDK typings are incomplete
+            ((_o = this.form.helper) === null || _o === void 0 ? void 0 : _o.supports_card_verification) ? html `
+                      <foxy-internal-select-control
+                        helper-text=${this.t(`${scope}.${inferPrefix}card-verification.helper_text_${
+            // @ts-expect-error SDK typings are incomplete
+            this.form[`${propertyPrefix}card_verification`] || 'disabled'}`)}
+                        layout="summary-item"
+                        infer="${inferPrefix}card-verification"
+                        .options=${this.__cardVerificationOptions}
+                        .getValue=${() => {
+                // @ts-expect-error SDK typings are incomplete
+                return this.form[`${propertyPrefix}card_verification`] || 'disabled';
+            }}
+                      >
+                      </foxy-internal-select-control>
+                    `
                 : ''}
-            ${blocks.map(block => this.__renderBlock(block))}
+            </foxy-internal-summary-control>
+
             ${
             // @ts-expect-error SDK typings are incomplete
-            ((_o = this.form.helper) === null || _o === void 0 ? void 0 : _o.supports_card_verification) && ((_p = 
+            ((_p = this.form.helper) === null || _p === void 0 ? void 0 : _p.supports_card_verification) && ((_q = 
             // @ts-expect-error SDK typings are incomplete
-            this.form.card_verification) === null || _p === void 0 ? void 0 : _p.startsWith('enabled_'))
-                ? ['visa', 'mastercard', 'american-express', 'discover', 'default'].map(type => {
+            this.form[`${propertyPrefix}card_verification`]) === null || _q === void 0 ? void 0 : _q.startsWith('enabled_'))
+                ? html `
+                    <foxy-internal-summary-control
+                      layout="details"
+                      class="mt-s"
+                      infer="${inferPrefix}card-verification-config"
+                    >
+                      ${['visa', 'mastercard', 'american-express', 'discover', 'default'].map(type => {
                     var _a;
                     return html `
-                      <foxy-internal-number-control
-                        json-template=${ifDefined((_a = 
+                            <foxy-internal-number-control
+                              json-template=${ifDefined((_a = 
                     // @ts-expect-error SDK typings are incomplete
                     this.form.helper) === null || _a === void 0 ? void 0 : _a.card_verification_config)}
-                        json-path="verification_amounts.${type.replace(/-/g, '_')}"
-                        property="${prefix.replace(/-/g, '_')}card_verification_config"
-                        layout="summary-item"
-                        suffix="¤"
-                        infer="card-verification-config-verification-amounts-${type}"
-                        step="0.01"
-                        min="0"
-                      >
-                      </foxy-internal-number-control>
-                    `;
-                })
+                              json-path="verification_amounts.${type.replace(/-/g, '_')}"
+                              property="${propertyPrefix}card_verification_config"
+                              layout="summary-item"
+                              suffix="¤"
+                              infer="${inferPrefix}card-verification-config-verification-amounts-${type}"
+                              step="0.01"
+                              min="0"
+                            >
+                            </foxy-internal-number-control>
+                          `;
+                })}
+                    </foxy-internal-summary-control>
+                  `
                 : ''}
           </foxy-internal-summary-control>
         `;