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

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

@@ -1,14 +1,12 @@
-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 { ResponsiveMixin } from "../../../mixins/responsive.js";
-import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { classMap } from "../../../utils/class-map.js";
-import get from 'lodash-es/get';
 import { InferrableMixin } from "../../../mixins/inferrable.js";
+import { ThemeableMixin } from "../../../mixins/themeable.js";
+import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import get from 'lodash-es/get';
 const NS = 'pagination';
-const Base = ResponsiveMixin(ConfigurableMixin(ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement), NS))));
+const Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement), NS)));
 /**
  * Helper element that adds pagination controls to elements
  * representing Hypermedia API collection pages. Works with NucleonElement instances only.
@@ -27,125 +25,241 @@ 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 },
+            __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 && returnedItems ? Math.ceil(total / returnedItems) : 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="cursor-pointer appearance-none bg-transparent rounded-s font-medium px-xs hover-underline 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}>${this.__limit}</option>`}
+                ${limitOptions.map(option => html `<option value=${option}>${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 ml-auto" 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 +270,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;
         }
     }

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 { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport get from 'lodash-es/get';\nimport { InferrableMixin } from '../../../mixins/inferrable';\n\nconst NS = 'pagination';\nconst Base = ResponsiveMixin(\n  ConfigurableMixin(ThemeableMixin(TranslatableMixin(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    };\n  }\n\n  private __pageElement: NucleonElement<any> | null = null;\n\n  private __rerender = () => this.requestUpdate();\n\n  private __first = '';\n\n  /** URL of the first page of the colletion. */\n  get first(): string {\n    return this.__first;\n  }\n\n  set first(newValue: string) {\n    this.__first = newValue;\n    if (this.__pageElement) this.__pageElement.href = newValue;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.__connectPageElement();\n  }\n\n  render(): TemplateResult {\n    const data = this.__pageElement?.data;\n    const { disabled, lang, ns } = this;\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 offsetValue = Number(get(data, 'offset'));\n    const offset = Number.isNaN(offsetValue) ? 0 : offsetValue;\n\n    const canGoBack = !disabled && offset > 0;\n    const canGoForth = !disabled && offset + returnedItems < total;\n\n    const labelClass = 'sr-only sm-not-sr-only';\n    const from = offset + 1;\n    const to = offset + returnedItems;\n\n    return html`\n      <slot @slotchange=${this.__connectPageElement}></slot>\n\n      ${offset > 0 || offset + returnedItems < total\n        ? html`\n            <div\n              class=\"mt-s grid gap-s items-center -mx-xs\"\n              style=\"grid-template-columns: 1fr auto 1fr\"\n            >\n              <div class=\"flex items-center space-x-s\">\n                <vaadin-button\n                  data-testid=\"first\"\n                  theme=\"contrast tertiary-inline\"\n                  ?disabled=${!canGoBack}\n                  @click=${() => this.__goTo('first')}\n                >\n                  <iron-icon class=\"icon-inline text-s\" icon=\"icons:first-page\"></iron-icon>\n                  <foxy-i18n class=${labelClass} lang=${lang} key=\"first\" ns=${ns}></foxy-i18n>\n                </vaadin-button>\n\n                <vaadin-button\n                  data-testid=\"prev\"\n                  theme=\"contrast tertiary-inline\"\n                  ?disabled=${!canGoBack}\n                  @click=${() => this.__goTo('prev')}\n                >\n                  <iron-icon class=\"icon-inline text-s\" icon=\"icons:chevron-left\"></iron-icon>\n                  <foxy-i18n class=${labelClass} lang=${lang} key=\"previous\" ns=${ns}></foxy-i18n>\n                </vaadin-button>\n              </div>\n\n              <foxy-i18n\n                options=${JSON.stringify({ total, from, to })}\n                class=${classMap({\n                  'flex-1 text-xs text-tertiary text-center leading-xs truncate': true,\n                  'opacity-0': !data,\n                })}\n                lang=${lang}\n                key=\"pagination\"\n                ns=${ns}\n              >\n              </foxy-i18n>\n\n              <div class=\"flex items-center justify-end space-x-s\">\n                <vaadin-button\n                  data-testid=\"next\"\n                  theme=\"contrast tertiary-inline\"\n                  ?disabled=${!canGoForth}\n                  @click=${() => this.__goTo('next')}\n                >\n                  <foxy-i18n class=${labelClass} lang=${lang} key=\"next\" ns=${ns}></foxy-i18n>\n                  <iron-icon class=\"icon-inline text-s\" icon=\"icons:chevron-right\"></iron-icon>\n                </vaadin-button>\n\n                <vaadin-button\n                  data-testid=\"last\"\n                  theme=\"contrast tertiary-inline\"\n                  ?disabled=${!canGoForth}\n                  @click=${() => this.__goTo('last')}\n                >\n                  <foxy-i18n class=${labelClass} lang=${lang} key=\"last\" ns=${ns}></foxy-i18n>\n                  <iron-icon class=\"icon-inline text-s\" icon=\"icons:last-page\"></iron-icon>\n                </vaadin-button>\n              </div>\n            </div>\n          `\n        : ''}\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__disconnectPageElement();\n  }\n\n  private __goTo(rel: string): void {\n    this.__pageElement!.href = String(get(this.__pageElement?.data, `_links.${rel}.href`));\n  }\n\n  private __disconnectPageElement() {\n    this.__pageElement?.removeEventListener('update', this.__rerender);\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.__rerender);\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":"AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAElE,OAAO,GAAG,MAAM,eAAe,CAAC;AAEhC,MAAM,EAAE,GAAG,YAAY,CAAC;AACxB,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,iBAAiB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;AAEnG;;;;;;;;;;;;;;GAcG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAApC;;QA6BmB,8BAAyB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;QAEvD,4BAAuB,GAAG,GAAG,EAAE;;YAC9C,MAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,0CAAE,KAAK,GAAG;QACnD,CAAC,CAAC;QAEM,kBAAa,GAA+B,IAAI,CAAC;QAEjD,iBAAY,GAAG,CAAC,CAAC;QAEjB,YAAO,GAAG,EAAE,CAAC;QAEb,YAAO,GAAG,EAAE,CAAC;QAEb,WAAM,GAAG,CAAC,CAAC;IAmOrB,CAAC;IA7QC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,aAAa,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;YACnC,YAAY,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;YAClC,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;YAC7B,MAAM,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC7B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,KAAK,CAAC,MAAM;YACZ,GAAG;;;;;;;;;OAUF;SACF,CAAC;IACJ,CAAC;IAkBD,+CAA+C;IAC/C,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,IAAI,KAAK,CAAC,QAAgB;;QACxB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACxB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAEhB,IAAI;YACF,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC9B,MAAM,KAAK,GAAG,QAAQ,OAAC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,mCAAI,EAAE,CAAC,CAAC;YAC5D,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;SAC7E;QAAC,WAAM;YACN,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;SACnB;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACzD,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;;QACJ,MAAM,IAAI,SAAG,IAAI,CAAC,aAAa,0CAAE,IAAI,CAAC;QAEtC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC;QAC/D,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC;QAEhF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;QACpD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;QAExD,MAAM,YAAY,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAC7C,MAAM,YAAY,GAAG,CAAC,CAAC;QACvB,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;QAChD,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;QAC3D,MAAM,KAAK,GAAG,KAAK,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAE5E,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,oBAAoB;;QAE3C,MAAM,GAAG,CAAC,IAAI,MAAM,GAAG,aAAa,GAAG,KAAK;YAC5C,CAAC,CAAC,IAAI,CAAA;;;;;;;;;4BASc,IAAI,CAAC,QAAQ;0BACf,CAAC,GAAU,EAAE,EAAE;gBACvB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAE,GAAG,CAAC,aAAmC,CAAC,KAAK,CAAC,CAAC;gBACxE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;YAClB,CAAC;;kBAEC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;gBACnC,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,WAAW;kBAC9D,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,iBAAiB,MAAM,IAAI,MAAM,WAAW,CAAC;;;;;gBAK9E,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE;gBAC/C,IAAI,CAAC,CAAC,SAAS,GAAG,YAAY,GAAG,CAAC,IAAI,SAAS,KAAK,KAAK,GAAG,CAAC,CAAC;oBAAE,OAAO;gBAEvE,MAAM,UAAU,GAAG,SAAS,KAAK,YAAY,IAAI,KAAK,GAAG,YAAY,GAAG,CAAC,CAAC;gBAC1E,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,CAAC,CAAC;gBAEpD,OAAO,IAAI,CAAA;;;;4CAIiB,SAAS,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;gCACnD,IAAI,CAAC,QAAQ,IAAI,CAAC,aAAa,IAAI,CAAC,UAAU,CAAC;6BAClD,CAAC,GAAe,EAAE,EAAE;oBAC3B,IAAI,UAAU,EAAE;wBACd,MAAM,MAAM,GAAG,IAAI,CAAC,QAA6B,CAAC;wBAClD,MAAM,CAAC,SAAS,EAAE,CAAC;wBAEnB,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;wBACxD,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,gBAAgB,YAAY,IAAI,CAAC;wBAErE,MAAM,YAAY,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;wBAC3D,MAAM,cAAc,GAAG,YAAY,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;wBACrE,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,kBAAkB,cAAc,GAAG,CAAC;qBAC9D;yBAAM;wBACL,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC;qBAC7B;gBACH,CAAC;;sBAEC,UAAU;oBACV,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,YAAY,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK;wBACnD,CAAC,CAAC,IAAI,CAAA;;;;;gCAKE,IAAI,CAAC,MAAM;;;2BAGhB;wBACH,CAAC,CAAC,KAAK;oBACT,CAAC,CAAC,SAAS,GAAG,CAAC;;iBAEpB,CAAC;YACJ,CAAC,CAAC;;WAEL;YACH,CAAC,CAAC,EAAE;;;;iBAIK,CAAC,GAAe,EAAE,EAAE;YAC3B,MAAM,MAAM,GAAG,GAAG,CAAC,aAAkC,CAAC;YACtD,MAAM,SAAS,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;YACjD,MAAM,mBAAmB,GACvB,SAAS,CAAC,GAAG,IAAI,GAAG,CAAC,OAAO;gBAC5B,GAAG,CAAC,OAAO,IAAI,SAAS,CAAC,GAAG,GAAG,SAAS,CAAC,MAAM;gBAC/C,SAAS,CAAC,IAAI,IAAI,GAAG,CAAC,OAAO;gBAC7B,GAAG,CAAC,OAAO,IAAI,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC;YAElD,IAAI,CAAC,mBAAmB;gBAAE,MAAM,CAAC,KAAK,EAAE,CAAC;QAC3C,CAAC;;;;;;;;;;;;;oBAaW,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC;;;;kBAIvB,KAAK;wBACC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY;wBACvB,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,KAAK,IAAI,CAAC,CAAC;uBACpD,CAAC,GAAkB,EAAE,EAAE;;YAChC,IAAI,GAAG,CAAC,GAAG,KAAK,OAAO,EAAE;gBACvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;gBAChC,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,GAAG;aACxB;QACH,CAAC;;;;;;0BAMa,IAAI,CAAC,QAAQ;uBAChB,GAAG,EAAE;;YACZ,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;YAChC,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,GAAG;QACzB,CAAC;;;;;;;KAOV,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAiC;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAmB,CAAC;QACxE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAAE,OAAO;QAE1D,IAAI;YACF,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAClC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;YAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAEhD,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACjC,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YAElC,IAAI,KAAK;gBAAE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC3D,IAAI,MAAM;gBAAE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC9D,IAAI,IAAI,CAAC,aAAa;gBAAE,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;SAClE;QAAC,WAAM;YACN,EAAE;SACH;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC5D,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;IAC9D,CAAC;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjD,CAAC;IAEO,uBAAuB;;QAC7B,MAAA,IAAI,CAAC,aAAa,0CAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,yBAAyB,EAAE;QAClF,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;IAC5B,CAAC;IAEO,oBAAoB;;QAC1B,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAkB,MAAM,CAAC,CAAC;QACpE,MAAM,gBAAgB,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,qCAAM,EAAE,CAAC;QACxD,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,YAAY,cAAc,CAEvE,CAAC;QAEd,IAAI,mBAAmB,EAAE;YACvB,IAAI,CAAC,aAAa,GAAG,mBAAmB,CAAC;YACzC,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,yBAAyB,CAAC,CAAC;YAC9E,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;SACtC;IACH,CAAC;CACF","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 { 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(ThemeableMixin(TranslatableMixin(InferrableMixin(LitElement), NS)));\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      __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 && returnedItems ? Math.ceil(total / returnedItems) : 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=\"cursor-pointer appearance-none bg-transparent rounded-s font-medium px-xs hover-underline 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}>${this.__limit}</option>`}\n                ${limitOptions.map(option => html`<option value=${option}>${option}</option>`)}\n              </select>\n\n              <foxy-i18n class=\"text-tertiary ml-auto\" infer=\"\" key=\"jump_to\"></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"]}

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

@@ -1,6 +1,6 @@
-import '@polymer/iron-icons';
-import '@polymer/iron-icon';
 import '@vaadin/vaadin-button';
+import '../../internal/InternalSummaryControl/index';
+import '../../internal/InternalNumberControl/index';
 import '../I18n/index';
 import { Pagination } from './Pagination';
 export { Pagination };

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

@@ -1,6 +1,6 @@
-import '@polymer/iron-icons';
-import '@polymer/iron-icon';
 import '@vaadin/vaadin-button';
+import "../../internal/InternalSummaryControl/index.js";
+import "../../internal/InternalNumberControl/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,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,uBAAuB,CAAC;AAC/B,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 '@polymer/iron-icons';\nimport '@polymer/iron-icon';\nimport '@vaadin/vaadin-button';\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;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"]}

package/dist/mixins/themeable.js

@@ -400,17 +400,6 @@ option{
   border-width: 0;
 }
 
-:host([sm]) .sm-not-sr-only {
-  position: static;
-  width: auto;
-  height: auto;
-  padding: 0;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
-}
-
 .pointer-events-none {
   pointer-events: none;
 }
@@ -457,6 +446,11 @@ option{
   left: var(--lumo-space-m, 1rem);
 }
 
+.inset-x-0 {
+  left: 0;
+  right: 0;
+}
+
 .top-0 {
   top: 0;
 }
@@ -473,6 +467,10 @@ option{
   right: var(--lumo-space-m, 1rem);
 }
 
+.bottom-0 {
+  bottom: 0;
+}
+
 .bottom {
   bottom: var(--lumo-space-m, 1rem);
 }
@@ -966,6 +964,10 @@ option{
   table-layout: fixed;
 }
 
+.origin-top {
+  transform-origin: top;
+}
+
 .origin-top-right {
   transform-origin: top right;
 }
@@ -1054,6 +1056,11 @@ option{
   --tw-scale-y: 0;
 }
 
+.scale-50 {
+  --tw-scale-x: .5;
+  --tw-scale-y: .5;
+}
+
 .scale-90 {
   --tw-scale-x: .9;
   --tw-scale-y: .9;
@@ -1526,6 +1533,10 @@ option{
   border-color: currentColor;
 }
 
+.border-base {
+  border-color: var(--lumo-base-color, #fff);
+}
+
 .border-contrast-5 {
   border-color: var(--lumo-contrast-5pct, hsla(214, 61%, 25%, 0.05));
 }

package/dist/mixins/themeable.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeable.js","sourceRoot":"","sources":["../../src/mixins/themeable.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAEtE,OAAO,EAA0C,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,EAAE,eAAe,EAAE,wBAAqB;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAI/E,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAkB,EACkB,EAAE;IACtC,OAAO,MAAM,gBAAiB,SAAQ,WAAW;QAC/C,MAAM,KAAK,MAAM;YACf,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;YAEjC,OAAO;gBACL,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClF,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAuKF;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI;IACF,cAAc,CACZ,yBAAyB,EACzB,GAAG;;;;;;;;KASF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,eAAe,EACf,GAAG;;;;;;;KAQF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,uEAAuE;IACvE,cAAc,CACZ,aAAa,EACb,GAAG;;;KAIF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED;;;;;;;GAOG;AACH,MAAM,OAAgB,SAAU,SAAQ,mBAAmB,CACzD,eAAe,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAC5C;CAAG","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\nimport { CSSResult, CSSResultArray, Constructor, LitElement, css } from 'lit-element';\n\nimport { ResponsiveMixin } from './responsive';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\n\ntype Base = Constructor<LitElement> & { styles?: CSSResult | CSSResultArray | CSSStyleSheet };\n\nexport const ThemeableMixin = <TBase extends Base>(\n  BaseElement: TBase\n): TBase & { styles: CSSResultArray } => {\n  return class ThemeableElement extends BaseElement {\n    static get styles(): CSSResultArray {\n      const originalCSS = super.styles;\n\n      return [\n        ...(originalCSS ? (Array.isArray(originalCSS) ? originalCSS : [originalCSS]) : []),\n        css`\n          @tailwind base;\n\n          * {\n            -webkit-tap-highlight-color: transparent;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n          }\n\n          :host {\n            display: block;\n            color: var(--lumo-body-text-color);\n            line-height: var(--lumo-line-height-m);\n            font: normal var(--lumo-font-size-m) var(--lumo-font-family);\n          }\n\n          details > summary::-webkit-details-marker {\n            display: none;\n          }\n\n          details > summary {\n            list-style: none;\n          }\n\n          vaadin-select {\n            margin-top: -4px;\n            margin-bottom: -4px;\n          }\n\n          vaadin-text-area,\n          vaadin-text-field,\n          vaadin-date-picker,\n          vaadin-email-field,\n          vaadin-number-field,\n          vaadin-custom-field,\n          vaadin-integer-field,\n          vaadin-password-field,\n          vaadin-checkbox-group,\n          vaadin-radio-group,\n          vaadin-combo-box::part(text-field),\n          vaadin-date-picker::part(text-field) {\n            padding-top: 0;\n            padding-bottom: 0;\n          }\n\n          vaadin-text-area::part(label),\n          vaadin-text-field::part(label),\n          vaadin-date-picker::part(label),\n          vaadin-email-field::part(label),\n          vaadin-number-field::part(label),\n          vaadin-custom-field::part(label),\n          vaadin-integer-field::part(label),\n          vaadin-password-field::part(label),\n          vaadin-checkbox-group::part(label),\n          vaadin-radio-group::part(label),\n          vaadin-combo-box::part(label),\n          vaadin-date-picker::part(label) {\n            margin-left: 0;\n          }\n\n          vaadin-time-picker,\n          vaadin-date-time-picker {\n            width: 100%;\n          }\n\n          vaadin-button,\n          vaadin-checkbox::part(checkbox) {\n            margin: 0;\n          }\n\n          vaadin-checkbox::part(label) {\n            margin: 0.1875em var(--lumo-space-m);\n          }\n\n          .appearance-none {\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            appearance: none;\n          }\n\n          .appearance-none::-webkit-calendar-picker-indicator,\n          .appearance-none::-webkit-outer-spin-button,\n          .appearance-none::-webkit-inner-spin-button,\n          .appearance-none::-webkit-list-button {\n            opacity: 0 !important;\n            width: 0 !important;\n            margin: 0 !important;\n            padding: 0 !important;\n          }\n\n          input::-webkit-date-and-time-value {\n            text-align: inherit !important;\n          }\n\n          [hidden] {\n            display: none !important;\n          }\n\n          option {\n            color: var(--lumo-body-text-color);\n          }\n\n          @tailwind components;\n\n          @tailwind utilities;\n\n          @layer utilities {\n            .border-radius-overflow-fix {\n              -webkit-mask-image: -webkit-radial-gradient(white, black);\n            }\n\n            @variants sm, md, lg, xl {\n              .grid-rows-auto {\n                grid-auto-rows: 1fr;\n              }\n\n              .icon-inline {\n                --iron-icon-height: 1em;\n                --iron-icon-width: 1em;\n              }\n\n              .bg-blurred {\n                backdrop-filter: blur(25px);\n                background: var(--lumo-tint-80pct);\n              }\n\n              .max-w-modal {\n                max-width: 28rem;\n              }\n\n              .max-w-modal-wide {\n                max-width: 50rem;\n              }\n\n              .w-narrow-modal {\n                width: 18rem;\n              }\n\n              .snap-x-mandatory {\n                scroll-snap-type: x mandatory;\n              }\n\n              .snap-start {\n                scroll-snap-align: start;\n              }\n\n              .hljs-tag {\n                color: var(--lumo-tertiary-text-color);\n                font-weight: 500;\n              }\n\n              .hljs-name {\n                color: var(--lumo-primary-text-color);\n                font-weight: 500;\n              }\n\n              .hljs-attr {\n                color: var(--lumo-secondary-text-color);\n                font-weight: 500;\n              }\n\n              .hljs-string {\n                color: var(--lumo-success-text-color);\n                font-weight: 500;\n              }\n            }\n          }\n        `,\n      ];\n    }\n  };\n};\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker',\n    css`\n      vaadin-date-time-picker-custom-field {\n        --lumo-text-field-size: auto;\n        padding: 0;\n      }\n\n      vaadin-date-time-picker-custom-field::part(label) {\n        padding-bottom: 0.5em;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker-date-picker',\n    css`\n      :host {\n        --lumo-text-field-size: auto;\n      }\n      vaadin-date-time-picker-date-text-field {\n        padding: 0;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker-time-picker',\n    css`\n      :host {\n        --lumo-text-field-size: auto;\n      }\n      vaadin-date-time-picker-time-text-field {\n        padding: 0;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-button',\n    css`\n      #button {\n        cursor: pointer;\n      }\n\n      :host([theme~='primary']) {\n        font-weight: 500;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  /** https://github.com/vaadin-component-factory/vcf-tooltip/issues/6 */\n  registerStyles(\n    'vcf-tooltip',\n    css`\n      :host([hidden]) [part='container'] {\n        display: none !important;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\n/**\n * One of the base classes for each rel-specific element in the collection\n * providing shared TailwindCSS styles for Shadow DOM content.\n * This class MUST NOT be used on its own (hence the `abstract` keyword) or\n * referenced externally (outside of the package).\n *\n * @deprecated\n */\nexport abstract class Themeable extends ScopedElementsMixin(\n  ResponsiveMixin(ThemeableMixin(LitElement))\n) {}\n"]}
+{"version":3,"file":"themeable.js","sourceRoot":"","sources":["../../src/mixins/themeable.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAEtE,OAAO,EAA0C,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,EAAE,eAAe,EAAE,wBAAqB;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAI/E,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAkB,EACkB,EAAE;IACtC,OAAO,MAAM,gBAAiB,SAAQ,WAAW;QAC/C,MAAM,KAAK,MAAM;YACf,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;YAEjC,OAAO;gBACL,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClF,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAuKF;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI;IACF,cAAc,CACZ,yBAAyB,EACzB,GAAG;;;;;;;;KASF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,eAAe,EACf,GAAG;;;;;;;KAQF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,uEAAuE;IACvE,cAAc,CACZ,aAAa,EACb,GAAG;;;KAIF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED;;;;;;;GAOG;AACH,MAAM,OAAgB,SAAU,SAAQ,mBAAmB,CACzD,eAAe,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAC5C;CAAG","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\nimport { CSSResult, CSSResultArray, Constructor, LitElement, css } from 'lit-element';\n\nimport { ResponsiveMixin } from './responsive';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\n\ntype Base = Constructor<LitElement> & { styles?: CSSResult | CSSResultArray | CSSStyleSheet };\n\nexport const ThemeableMixin = <TBase extends Base>(\n  BaseElement: TBase\n): TBase & { styles: CSSResultArray } => {\n  return class ThemeableElement extends BaseElement {\n    static get styles(): CSSResultArray {\n      const originalCSS = super.styles;\n\n      return [\n        ...(originalCSS ? (Array.isArray(originalCSS) ? originalCSS : [originalCSS]) : []),\n        css`\n          @tailwind base;\n\n          * {\n            -webkit-tap-highlight-color: transparent;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n          }\n\n          :host {\n            display: block;\n            color: var(--lumo-body-text-color);\n            line-height: var(--lumo-line-height-m);\n            font: normal var(--lumo-font-size-m) var(--lumo-font-family);\n          }\n\n          details > summary::-webkit-details-marker {\n            display: none;\n          }\n\n          details > summary {\n            list-style: none;\n          }\n\n          vaadin-select {\n            margin-top: -4px;\n            margin-bottom: -4px;\n          }\n\n          vaadin-text-area,\n          vaadin-text-field,\n          vaadin-date-picker,\n          vaadin-email-field,\n          vaadin-number-field,\n          vaadin-custom-field,\n          vaadin-integer-field,\n          vaadin-password-field,\n          vaadin-checkbox-group,\n          vaadin-radio-group,\n          vaadin-combo-box::part(text-field),\n          vaadin-date-picker::part(text-field) {\n            padding-top: 0;\n            padding-bottom: 0;\n          }\n\n          vaadin-text-area::part(label),\n          vaadin-text-field::part(label),\n          vaadin-date-picker::part(label),\n          vaadin-email-field::part(label),\n          vaadin-number-field::part(label),\n          vaadin-custom-field::part(label),\n          vaadin-integer-field::part(label),\n          vaadin-password-field::part(label),\n          vaadin-checkbox-group::part(label),\n          vaadin-radio-group::part(label),\n          vaadin-combo-box::part(label),\n          vaadin-date-picker::part(label) {\n            margin-left: 0;\n          }\n\n          vaadin-time-picker,\n          vaadin-date-time-picker {\n            width: 100%;\n          }\n\n          vaadin-button,\n          vaadin-checkbox::part(checkbox) {\n            margin: 0;\n          }\n\n          vaadin-checkbox::part(label) {\n            margin: 0.1875em var(--lumo-space-m);\n          }\n\n          .appearance-none {\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            appearance: none;\n          }\n\n          .appearance-none::-webkit-calendar-picker-indicator,\n          .appearance-none::-webkit-outer-spin-button,\n          .appearance-none::-webkit-inner-spin-button,\n          .appearance-none::-webkit-list-button {\n            opacity: 0 !important;\n            width: 0 !important;\n            margin: 0 !important;\n            padding: 0 !important;\n          }\n\n          input::-webkit-date-and-time-value {\n            text-align: inherit !important;\n          }\n\n          [hidden] {\n            display: none !important;\n          }\n\n          option {\n            color: var(--lumo-body-text-color);\n          }\n\n          @tailwind components;\n\n          @tailwind utilities;\n\n          @layer utilities {\n            .border-radius-overflow-fix {\n              -webkit-mask-image: -webkit-radial-gradient(white, black);\n            }\n\n            @variants sm, md, lg, xl {\n              .grid-rows-auto {\n                grid-auto-rows: 1fr;\n              }\n\n              .icon-inline {\n                --iron-icon-height: 1em;\n                --iron-icon-width: 1em;\n              }\n\n              .bg-blurred {\n                backdrop-filter: blur(25px);\n                background: var(--lumo-tint-80pct);\n              }\n\n              .max-w-modal {\n                max-width: 28rem;\n              }\n\n              .max-w-modal-wide {\n                max-width: 50rem;\n              }\n\n              .w-narrow-modal {\n                width: 18rem;\n              }\n\n              .snap-x-mandatory {\n                scroll-snap-type: x mandatory;\n              }\n\n              .snap-start {\n                scroll-snap-align: start;\n              }\n\n              .hljs-tag {\n                color: var(--lumo-tertiary-text-color);\n                font-weight: 500;\n              }\n\n              .hljs-name {\n                color: var(--lumo-primary-text-color);\n                font-weight: 500;\n              }\n\n              .hljs-attr {\n                color: var(--lumo-secondary-text-color);\n                font-weight: 500;\n              }\n\n              .hljs-string {\n                color: var(--lumo-success-text-color);\n                font-weight: 500;\n              }\n            }\n          }\n        `,\n      ];\n    }\n  };\n};\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker',\n    css`\n      vaadin-date-time-picker-custom-field {\n        --lumo-text-field-size: auto;\n        padding: 0;\n      }\n\n      vaadin-date-time-picker-custom-field::part(label) {\n        padding-bottom: 0.5em;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker-date-picker',\n    css`\n      :host {\n        --lumo-text-field-size: auto;\n      }\n      vaadin-date-time-picker-date-text-field {\n        padding: 0;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker-time-picker',\n    css`\n      :host {\n        --lumo-text-field-size: auto;\n      }\n      vaadin-date-time-picker-time-text-field {\n        padding: 0;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-button',\n    css`\n      #button {\n        cursor: pointer;\n      }\n\n      :host([theme~='primary']) {\n        font-weight: 500;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  /** https://github.com/vaadin-component-factory/vcf-tooltip/issues/6 */\n  registerStyles(\n    'vcf-tooltip',\n    css`\n      :host([hidden]) [part='container'] {\n        display: none !important;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\n/**\n * One of the base classes for each rel-specific element in the collection\n * providing shared TailwindCSS styles for Shadow DOM content.\n * This class MUST NOT be used on its own (hence the `abstract` keyword) or\n * referenced externally (outside of the package).\n *\n * @deprecated\n */\nexport abstract class Themeable extends ScopedElementsMixin(\n  ResponsiveMixin(ThemeableMixin(LitElement))\n) {}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foxy.io/elements",
   "type": "module",
-  "version": "1.41.0",
+  "version": "1.42.0-beta.1",
   "description": "E-commerce web components by Foxy.",
   "repository": {
     "type": "git",

package/dist/cdn/shared-14177287.js

@@ -1 +0,0 @@
-import"./foxy-spinner.js";import{I as e}from"./shared-d298bb95.js";customElements.define("foxy-internal-card",e);

package/dist/cdn/shared-1d2c7978.js

@@ -1 +0,0 @@
-import"./shared-a6b2bd14.js";import"./shared-174ae849.js";import"./shared-922db328.js";import"./shared-2a941373.js";import{b as e,I as t}from"./shared-f00ebf92.js";import"./shared-5c6a00e9.js";import{i as s}from"./shared-53e42a77.js";import{h as o}from"./shared-ba5c42c7.js";import{c as r,_ as n,B as i}from"./shared-cb58dfcd.js";import{S as a,a as l}from"./shared-3c0dcb9e.js";import{v as d}from"./shared-b738ee96.js";import{c}from"./shared-4e709717.js";let h,p=e=>e;customElements.define("foxy-internal-customer-form-legal-notice-control",class extends e{renderControl(){var e,t;const r=this.nucleon;return o(h||(h=p` <p class="leading-s text-xs text-secondary"> <foxy-i18n infer="" key="text"></foxy-i18n> <a class="font-medium text-body rounded hover-underline focus-outline-none focus-ring-2 focus-ring-primary-50" target="_blank" href="${0}" rel="noopener noreferrer"> <foxy-i18n infer="" key="link"></foxy-i18n> </a> </p> `),s(null===(t=null===(e=null==r?void 0:r.settings)||void 0===e?void 0:e.tos_checkbox_settings)||void 0===t?void 0:t.url))}});var u=r((function(e){!function(){const t=[{id:0,value:"Too weak",minDiversity:0,minLength:0},{id:1,value:"Weak",minDiversity:2,minLength:6},{id:2,value:"Medium",minDiversity:4,minLength:8},{id:3,value:"Strong",minDiversity:4,minLength:10}],s=(e,s=t,o="!\"#$%&'()*+,-./:;<=>?@[\\\\\\]^_`{|}~")=>{let r=e||"";s[0].minDiversity=0,s[0].minLength=0;const n=[{regex:"[a-z]",message:"lowercase"},{regex:"[A-Z]",message:"uppercase"},{regex:"[0-9]",message:"number"}];o&&n.push({regex:`[${o}]`,message:"symbol"});let i={};i.contains=n.filter((e=>new RegExp(`${e.regex}`).test(r))).map((e=>e.message)),i.length=r.length;let a=s.filter((e=>i.contains.length>=e.minDiversity)).filter((e=>i.length>=e.minLength)).sort(((e,t)=>t.id-e.id)).map((e=>({id:e.id,value:e.value})));return Object.assign(i,a[0]),i};e.exports={passwordStrength:s,defaultOptions:t}}()}));let m,f,_=e=>e;const g=a(l(t,"customer-form")),x=u.passwordStrength;class v extends g{constructor(){super(...arguments),this.passwordless=!1,this.settings=null,this.__passwordGeneratorOptions={checkStrength:e=>x(e).id>=2},this.__isAnonymousGetValue=()=>{var e;return!1===(null===(e=this.form)||void 0===e?void 0:e.is_anonymous)?"false":"true"},this.__isAnonymousSetValue=e=>{const t="true"===e;this.edit({is_anonymous:t}),t&&this.form.password&&this.edit({password:""}),t&&this.form.password_old&&this.edit({password_old:""}),t&&this.form.forgot_password&&this.edit({forgot_password:""})},this.__isAnonymousOptions=[{value:"true",label:"option_true"},{value:"false",label:"option_false"}],this.__refreshInterval=null}static get scopedElements(){return{"foxy-internal-customer-form-legal-notice-control":customElements.get("foxy-internal-customer-form-legal-notice-control"),"foxy-internal-radio-group-control":customElements.get("foxy-internal-radio-group-control"),"foxy-internal-timestamps-control":customElements.get("foxy-internal-timestamps-control"),"foxy-internal-password-control":customElements.get("foxy-internal-password-control"),"foxy-internal-submit-control":customElements.get("foxy-internal-submit-control"),"foxy-internal-delete-control":customElements.get("foxy-internal-delete-control"),"foxy-internal-text-control":customElements.get("foxy-internal-text-control"),"foxy-internal-undo-control":customElements.get("foxy-internal-undo-control"),"foxy-copy-to-clipboard":customElements.get("foxy-copy-to-clipboard"),"foxy-spinner":customElements.get("foxy-spinner"),"vcf-tooltip":customElements.get("vcf-tooltip"),"foxy-i18n":customElements.get("foxy-i18n"),"h-captcha":customElements.get("h-captcha"),"vaadin-button":customElements.get("vaadin-button")}}static get properties(){return n(n({},super.properties),{},{passwordless:{type:Boolean},settings:{type:Object}})}static get v8n(){return[({password:e,_links:t,is_anonymous:s=!0},o)=>!!o.passwordless||(!!(t||s||e)||"password:v8n_required"),({password_old:e,password:t,_links:s},o)=>{var r;return!s||(void 0===(null===(r=o.settings)||void 0===r?void 0:r.sign_up)||(!(t&&!e)||"password-old:v8n_required"))},({first_name:e})=>!e||e.length<=50||"first-name:v8n_too_long",({last_name:e})=>!e||e.length<=50||"last-name:v8n_too_long",({password:e})=>!e||x(e).id>=2||"password:v8n_too_weak",({password:e})=>!e||e.length<=50||"password:v8n_too_long",({tax_id:e})=>!e||e.length<=50||"tax-id:v8n_too_long",({email:e})=>e&&e.length>0||"email:v8n_required",({email:e})=>!e||e.length<=100||"email:v8n_too_long",({email:e})=>!e||d(e)||"email:v8n_invalid_email"]}get hiddenSelector(){const e=new Set(super.hiddenSelector.toString().split(" "));return this.settings?(e.add("forgot-password"),e.add("is-anonymous"),this.form.password||e.add("password-old"),"none"===this.settings.tos_checkbox_settings.usage&&e.add("legal-notice")):(!1!==this.form.is_anonymous&&(e.add("forgot-password"),e.add("password")),e.add("password-old"),e.add("legal-notice")),this.href&&(e.add("is-anonymous"),e.add("legal-notice")),new i(Array.from(e).join(" ").trim())}get headerTitleOptions(){var e,t;const s=this.data;return!s||(null===(e=s.first_name)||void 0===e?void 0:e.trim())||(null===(t=s.last_name)||void 0===t?void 0:t.trim())?super.headerTitleOptions:n(n({},super.headerTitleOptions),{},{context:"no_name"})}get headerSubtitleKey(){var e;return(null===(e=this.data)||void 0===e?void 0:e.is_anonymous)?"subtitle_anonymous":"subtitle_registered"}get headerSubtitleOptions(){return n(n({},super.headerSubtitleOptions),{},{id:this.headerCopyIdValue})}disconnectedCallback(){super.disconnectedCallback();const e=this.__refreshInterval;e&&clearInterval(e)}connectedCallback(){super.connectedCallback();const e=setInterval((()=>this.requestUpdate()),6e4);this.__refreshInterval=e}renderBody(){var e,t,s,r;const n=this.hiddenSelector.matches("first-name",!0),i=this.hiddenSelector.matches("last-name",!0);return o(m||(m=_` ${0} <div class="${0}"> <foxy-internal-text-control infer="first-name"></foxy-internal-text-control> <foxy-internal-text-control infer="last-name"></foxy-internal-text-control> </div> <foxy-internal-text-control helper-text="${0}" infer="email"> </foxy-internal-text-control> <foxy-internal-radio-group-control infer="is-anonymous" .getValue="${0}" .setValue="${0}" .options="${0}"> </foxy-internal-radio-group-control> <foxy-internal-password-control placeholder="${0}" helper-text="${0}" infer="password" show-generator .generatorOptions="${0}"> </foxy-internal-password-control> <foxy-internal-password-control infer="password-old"></foxy-internal-password-control> <foxy-internal-password-control helper-text="${0}" infer="forgot-password" show-generator> </foxy-internal-password-control> <foxy-internal-text-control infer="tax-id"></foxy-internal-text-control> <foxy-internal-customer-form-legal-notice-control infer="legal-notice"> </foxy-internal-customer-form-legal-notice-control> ${0} ${0} `),this.renderHeader(),c({"grid-cols-2":!n&&!i,hidden:n&&i,"gap-m":!0,grid:!n||!i}),this.__emailHelperText,this.__isAnonymousGetValue,this.__isAnonymousSetValue,this.__isAnonymousOptions,this.__passwordPlaceholder,this.__passwordHelperText,this.__passwordGeneratorOptions,this.__forgotPasswordHelperText,!this.data&&(null===(t=null===(e=this.settings)||void 0===e?void 0:e.sign_up)||void 0===t?void 0:t.enabled)&&"hcaptcha"===(null===(r=null===(s=this.settings)||void 0===s?void 0:s.sign_up)||void 0===r?void 0:r.verification.type)?o(f||(f=_` <h-captcha site-key="${0}" class="hidden" size="invisible" hl="${0}" @verified="${0}"> </h-captcha> `),this.settings.sign_up.verification.site_key,this.lang,(({token:e})=>{this.edit({verification:{type:"hcaptcha",token:e}}),super.submit()})):"",super.renderBody())}submit(){var e,t,s,o,r;"hcaptcha"!==(null===(s=null===(t=null===(e=this.settings)||void 0===e?void 0:e.sign_up)||void 0===t?void 0:t.verification)||void 0===s?void 0:s.type)||this.data?super.submit():(null===(o=this.__hcaptcha)||void 0===o||o.reset(),null===(r=this.__hcaptcha)||void 0===r||r.execute())}async _sendPatch(e){const t=await super._sendPatch(e);if(e.password){const e={key:"password_change_success",options:{email:t.email}};this.status=e}return t}async _sendGet(){return this.status=null,await super._sendGet()}async _fetch(...e){try{return await super._fetch(...e)}catch(e){let t;try{t=(await e.json())._embedded["fx:errors"][0].message}catch(t){throw e}throw"Conflict"===t||t.startsWith("This email address is already in use")?["error:email_already_used"]:t.startsWith("Customer registration is disabled")?["error:registration_disabled"]:t.startsWith("Client verification failed")?["error:verification_failed"]:t.startsWith("Provided password is incorrect")?["error:old_password_incorrect"]:e}}get __forgotPasswordHelperText(){var e,t;const s=null===(e=this.data)||void 0===e?void 0:e.forgot_password_timestamp,o="forgot-password.helper_text";if((null===(t=this.data)||void 0===t?void 0:t.forgot_password)&&s){const e=new Date(new Date(s).getTime()+18e5),t=Math.floor((e.getTime()-Date.now())/1e3/60);return t<=0?this.t(`${o}_expired_on`,{expiresOn:e}):this.t(`${o}_expires_in`,{expiresInMin:`${t}minutes`})}return this.t(o)}get __passwordPlaceholder(){return this.data?this.t("password.placeholder_new"):this.t("password.placeholder")}get __passwordHelperText(){return this.data?this.t("password.helper_text_new"):this.t("password.helper_text")}get __emailHelperText(){var e;return(null===(e=this.data)||void 0===e?void 0:e.last_login_date)?this.t("email.helper_text_last_login_date",{date:this.data.last_login_date}):this.t("email.helper_text")}get __hcaptcha(){return this.renderRoot.querySelector("h-captcha")}}customElements.define("foxy-customer-form",v);export{v as C,u};

package/dist/cdn/shared-58bb3dda.js

@@ -1 +0,0 @@
-import"./shared-2fe84d72.js";import"./shared-7f14ea13.js";import{I as e,a as t}from"./shared-f00ebf92.js";import"./foxy-copy-to-clipboard.js";import"./foxy-nucleon-element.js";import"./foxy-form-dialog.js";import"./shared-5c6a00e9.js";import{_ as s,m as i}from"./shared-cb58dfcd.js";import{h as r,s as o}from"./shared-ba5c42c7.js";import{s as l}from"./shared-53e476fd.js";import{g as a}from"./shared-bab2ea2c.js";import{F as n}from"./shared-343d1fd7.js";import{i as d}from"./shared-53e42a77.js";import{c as h}from"./shared-4e709717.js";import{u}from"./shared-f83207fb.js";let c,f=e=>e;let p,y,m,v,x,b,g,$,_=e=>e;customElements.define("foxy-internal-resource-picker-control-form",class extends e{constructor(){super(...arguments),this.selectionProps={}}static get properties(){return s(s({},super.properties),{},{selectionProps:{attribute:!1}})}renderBody(){return r(c||(c=f` <foxy-internal-async-list-control infer="selection" form="foxy-null" hide-delete-button hide-create-button @itemclick="${0}" ...="${0}"> </foxy-internal-async-list-control> `),(e=>{e.preventDefault(),this.edit({selection:e.detail}),this.submit()}),l(this.selectionProps))}}),customElements.define("foxy-internal-resource-picker-control",class extends t{constructor(){super(...arguments),this.getDisplayValueOptions=e=>({resource:e}),this.showCopyIdButton=!1,this.virtualHost=u("internal-resource-picker-control-"),this.getItemUrl=null,this.formProps={},this.filters=[],this.layout=null,this.first=null,this.item=null,this.form=null,this.__getItemRenderer=i((e=>new Function("ctx",`return ctx.html\`\n        <${null!=e?e:"foxy-null"}\n          related=\${JSON.stringify(ctx.related)}\n          parent=\${ctx.parent}\n          infer="card"\n          href=\${ctx.href}\n          ...=\${ctx.spread(ctx.props)}\n        >\n        </${null!=e?e:"foxy-null"}>\``)))}static get properties(){return s(s({},super.properties),{},{getDisplayValueOptions:{attribute:!1},showCopyIdButton:{type:Boolean,attribute:"show-copy-id-button"},virtualHost:{},getItemUrl:{attribute:!1},formProps:{type:Object},filters:{type:Array},layout:{},first:{},item:{},form:{}})}renderControl(){var e;const t=s(s({},this.formProps),{},{".selectionProps":{".filters":this.filters,".first":this.first,".item":this.item}});return r(p||(p=_` <foxy-form-dialog parent="foxy://${0}/select" header="header" infer="dialog" alert .props="${0}" .form="${0}" @fetch="${0}"> </foxy-form-dialog> ${0} `),this.virtualHost,t,null!==(e=this.form)&&void 0!==e?e:"foxy-internal-resource-picker-control-form",this.__handleFetchEvent,"summary-item"===this.layout?this.__renderSummaryItemLayout():this.__renderStandaloneLayout())}updated(e){var t,s;super.updated(e),e.has("item")&&(null===(s=(t=this.__getItemRenderer.cache).clear)||void 0===s||s.call(t))}__clear(){this._value="",this.dispatchEvent(new CustomEvent("clear"))}__renderSummaryItemLayout(){const e=this.renderRoot.querySelector("#value");return r(y||(y=_` <div class="leading-xs"> <div class="flex items-center gap-xs"> <div class="text-m text-body whitespace-nowrap flex-1">${0}</div> <button aria-label="${0}" class="${0}" ?disabled="${0}" @click="${0}"> <div class="truncate min-w-0"> ${0} </div> </button> <button aria-label="${0}" class="${0}" style="width:1em;height:1em" ?disabled="${0}" ?hidden="${0}" @click="${0}"> ${0} </button> </div> <div style="max-width:32rem"> <div class="text-xs text-secondary">${0}</div> <div class="text-xs text-error" ?hidden="${0}"> ${0} </div> </div> </div> <foxy-nucleon infer="" href="${0}" id="value" @update="${0}"> </foxy-nucleon> `),this.label,this.t("select"),h({"text-right min-w-0 transition-colors transition-opacity":!0,"rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"text-secondary":this.readonly,"text-disabled":this.disabled,"cursor-pointer text-body hover-opacity-80":!this.disabled&&!this.readonly,"font-medium":!this.readonly}),this.disabled||this.readonly,(e=>{if(this.disabled||this.readonly)return;const t=e.currentTarget,s=this.renderRoot.querySelector("foxy-form-dialog");s.href="",s.show(t)}),this._value?r(m||(m=_` <foxy-i18n infer="" key="value" .options="${0}"> </foxy-i18n> `),(null==e?void 0:e.data)?this.getDisplayValueOptions(e.data):{context:(null==e?void 0:e.in("fail"))?"fail":"busy"}):this.placeholder,this.t("clear"),h({"rounded-full transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer text-tertiary hover-text-body":!this.disabled,"cursor-default text-disabled":this.disabled}),this.disabled,this.readonly||!this._value,this.__clear,o(v||(v=_`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`)),this.helperText,this.disabled||this.readonly,this._errorMessage,d(this._value||void 0),(()=>this.requestUpdate()))}__renderStandaloneLayout(){var e,t,s,i,o;const n=this.__valueLoader,u="string"==typeof this._value?a(this._value):void 0,c="string"==typeof this._value?null===(e=this.getItemUrl)||void 0===e?void 0:e.call(this,this._value,null!==(t=null==n?void 0:n.data)&&void 0!==t?t:null):void 0;return r(x||(x=_` <div class="block group"> <div class="${0}"> <span class="mr-auto text-l">${0}</span> ${0} ${0} ${0} </div> <div class="text-secondary text-s" ?hidden="${0}">${0}</div> <button class="${0}" style="padding:calc(.625em + (var(--lumo-border-radius)/ 4) - 1px)" ?disabled="${0}" @click="${0}"> <div class="${0}"> <foxy-nucleon class="block" infer="" href="${0}" id="valueLoader" @update="${0}"> ${0} </foxy-nucleon> </div> </button> <div class="mt-xs text-xs leading-xs text-error" ?hidden="${0}"> ${0} </div> </div> `),h({"flex items-center gap-s transition-colors font-medium":!0,"text-disabled":this.disabled}),this.label,c?r(b||(b=_` <a class="text-body rounded transition-opacity hover-opacity-90 focus-outline-none focus-ring-2 focus-ring-primary-50" href="${0}"> <foxy-i18n infer="" key="view"></foxy-i18n> </a> `),c):"",this.showCopyIdButton&&null!==u?r(g||(g=_` <foxy-copy-to-clipboard layout="text" theme="contrast tertiary-inline" infer="copy-id" text="${0}"> </foxy-copy-to-clipboard> `),u):"",this.readonly||!this._value?"":r($||($=_` <vaadin-button theme="error tertiary-inline" ?disabled="${0}" @click="${0}"> <foxy-i18n infer="" key="clear"></foxy-i18n> </vaadin-button> `),this.disabled,this.__clear),!this.helperText,this.helperText,h({"block w-full bg-contrast-5 rounded text-left transition-colors":!0,"focus-outline-none focus-ring-2 focus-ring-primary-50":!0,"cursor-pointer hover-bg-contrast-10":!this.disabled&&!this.readonly,"cursor-default":this.disabled||this.readonly,"mt-s":!!this.label||!!this.helperText}),this.disabled||this.readonly,(e=>{const t=e.currentTarget,s=this.renderRoot.querySelector("foxy-form-dialog");s.href="",s.show(t)}),h({"transition-opacity":!0,"opacity-50":this.disabled}),d(this._value||void 0),(()=>this.requestUpdate()),this.__getItemRenderer(this.item)({html:r,data:null!==(s=null==n?void 0:n.data)&&void 0!==s?s:null,href:this._value||"",related:[],parent:"",props:{},spread:l,simplifyNsLoading:this.simplifyNsLoading,disabled:this.disabled,disabledControls:this.disabledControls,readonly:this.readonly,readonlyControls:this.readonlyControls,hidden:this.hidden,hiddenControls:this.hiddenControls,templates:this.templates,previous:null,next:null,group:null!==(o=null===(i=this.nucleon)||void 0===i?void 0:i.group)&&void 0!==o?o:"",lang:this.lang,ns:this.ns}),!this._errorMessage||this.disabled||this.readonly,this._errorMessage)}__handleFetchEvent(e){if(!(e instanceof n))return;if(e.defaultPrevented)return;const{url:t,method:s}=e.request;return t===`foxy://${this.virtualHost}/select`&&"POST"===s?e.respondWith(this.__handleSelect(e.request)):t===`foxy://${this.virtualHost}/empty`&&"GET"===s?e.respondWith(this.__handleEmpty()):void 0}async __handleSelect(e){const t=await e.clone().json();return this._value=t.selection,new Response(JSON.stringify({_links:{self:{href:`foxy://${this.virtualHost}/empty`}},message:"Resource selected."}))}async __handleEmpty(){return new Response(JSON.stringify({_links:{self:{href:`foxy://${this.virtualHost}/empty`}},message:"Resource selected."}))}get __valueLoader(){return this.renderRoot.querySelector("#valueLoader")}});