npm - @foxy.io/elements - Versions diffs - 1.42.0-beta.6 → 1.42.0-beta.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (236) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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, 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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;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/SwipeActions/SwipeActions.d.ts CHANGED Viewed

@@ -20,6 +20,7 @@ export declare class SwipeActions extends LitElement {
     private __state;
     private __scrollTimeout;
     render(): TemplateResult;
+    firstUpdated(changes: Map<keyof this, unknown>): void;
     private get __scroll();
     private get __content();
     private __closeActions;

package/dist/elements/public/SwipeActions/SwipeActions.js CHANGED Viewed

@@ -31,11 +31,8 @@ export class SwipeActions extends LitElement {
 }
 #scroll{
-  --internal-scrollbar-height:var(--scrollbar-height, 24px);
-  padding-bottom:var(--internal-scrollbar-height);
-  margin-top:calc(0px - var(--internal-scrollbar-height));
-  transform:translateY(var(--internal-scrollbar-height));
-  overflow:auto hidden;
+  margin-bottom:calc(0px - var(--scrollbar-height, 24px));
+  overflow:scroll hidden;
   white-space:nowrap;
   scroll-snap-type:x mandatory;
   display:flex;
@@ -83,6 +80,12 @@ export class SwipeActions extends LitElement {
       </div>
     `;
     }
+    firstUpdated(changes) {
+        super.firstUpdated(changes);
+        const scroll = this.__scroll;
+        const root = this.renderRoot.querySelector('#root');
+        root.style.setProperty('--scrollbar-height', `${scroll.offsetHeight - scroll.clientHeight}px`);
+    }
     get __scroll() {
         return this.renderRoot.querySelector('#scroll');
     }

package/dist/elements/public/SwipeActions/SwipeActions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SwipeActions.js","sourceRoot":"","sources":["../../../../src/elements/public/SwipeActions/SwipeActions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEpD;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;~~QA+CU~~,YAAO,GAA4D,MAAM,CAAC;QAE1E,oBAAe,GAA0B,IAAI,CAAC;~~IAyExD~~,CAAC;~~IAzHC~~,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC9B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCT~~,CAAC;IACJ,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,OAAO;;sBAEN,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;qBACpC,IAAI,CAAC,iBAAiB;oBACvB,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;;mCAElB,IAAI,CAAC,cAAc;;;;;;;;;;;KAWjD,CAAC;IACJ,CAAC;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAgB,CAAC;IACjE,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAgB,CAAC;IAClE,CAAC;IAEO,cAAc,CAAC,QAA4B;QACjD,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI;YAAE,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAEtE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;YACnB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,QAAQ;SACT,CAAC,CAAC;QAEH,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;IACxB,CAAC;IAEO,cAAc;QACpB,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC;QAE/D,IAAI,UAAU,IAAI,CAAC,EAAE;YACnB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;SACvB;aAAM,IAAI,WAAW,GAAG,UAAU,GAAG,WAAW,IAAI,CAAC,EAAE;YACtD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;SAC3B;IACH,CAAC;IAEO,iBAAiB,CAAC,GAAe;QACvC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC;YAAE,OAAO;QAE7C,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI;YAAE,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACtE,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;QAEtD,IAAI,KAAK,IAAI,GAAG,EAAE;YAChB,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC;YAC9B,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC,GAAG,EAAE;gBACrC,IAAI,CAAC,OAAO,GAAG,gBAAgB,CAAC;gBAChC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;oBACnB,GAAG,EAAE,CAAC;oBACN,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,WAAW;oBAChC,QAAQ,EAAE,QAAQ;iBACnB,CAAC,CAAC;YACL,CAAC,EAAE,EAAE,CAAC,CAAC;SACR;IACH,CAAC;CACF","sourcesContent":["import type { CSSResult, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { LitElement, css, html } from 'lit-element';\n\n/*\n A utility element for adding swipe actions to cards or list items. Usage:\n \n ```html\n * <foxy-swipe-actions>\n * <foxy-customer-card></foxy-customer-card>\n * <button slot=\"action\">Edit</button>\n * <button slot=\"action\">Delete</button>\n * </foxy-swipe-actions>\n * ```\n \n @element foxy-swipe-actions\n * @since 1.17.0\n */\nexport class SwipeActions extends LitElement {\n static get properties(): PropertyDeclarations {\n return {\n __state: { attribute: false },\n };\n }\n\n static get styles(): CSSResult {\n return css`\n #root {\n display: block;\n overflow: hidden;\n }\n\n #scroll {\n ~~--internal~~-~~scrollbar-height: var(--scrollbar-height, 24px);\n\n padding-~~bottom: ~~var(--internal-scrollbar-height);\n margin-top:~~ calc(0px - var(--~~internal-~~scrollbar-height~~));\n transform:~~ ~~translateY(var(--internal-scrollbar-height~~));\n overflow: ~~auto~~ hidden;\n white-space: nowrap;\n scroll-snap-type: x mandatory;\n display: flex;\n }\n\n #content {\n scroll-snap-align: start;\n width: 100%;\n flex-shrink: 0;\n }\n\n #content-transform-target {\n transition: transform 0.15s ease;\n }\n\n .idle-preview #content-transform-target {\n transform: translateX(calc(0px - var(--lumo-space-s)));\n }\n\n #action {\n scroll-snap-align: end;\n flex-shrink: 0;\n }\n `;\n }\n\n private __state: 'idle' \| 'idle-preview' \| 'scroll-started' \| 'scrolled' = 'idle';\n\n private __scrollTimeout: NodeJS.Timeout \| null = null;\n\n render(): TemplateResult {\n return html`\n <div\n class=${this.__state}\n id=\"root\"\n @mouseleave=${() => this.__closeActions('smooth')}\n @mousemove=${this.__handleMouseMove}\n @focusout=${() => this.__closeActions('auto')}\n >\n <div id=\"scroll\" @scroll=${this.__handleScroll}>\n <div id=\"content\">\n <div id=\"content-transform-target\">\n <slot></slot>\n </div>\n </div>\n <div id=\"action\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n\n private get __scroll() {\n return this.renderRoot.querySelector('#scroll') as HTMLElement;\n }\n\n private get __content() {\n return this.renderRoot.querySelector('#content') as HTMLElement;\n }\n\n private __closeActions(behavior?: 'auto' \| 'smooth'): void {\n if (this.__scrollTimeout !== null) clearTimeout(this.__scrollTimeout);\n\n this.__scroll.scroll({\n top: 0,\n left: 0,\n behavior,\n });\n\n this.__state = 'idle';\n }\n\n private __handleScroll() {\n const { scrollLeft, scrollWidth, clientWidth } = this.__scroll;\n\n if (scrollLeft <= 0) {\n this.__state = 'idle';\n } else if (scrollWidth - scrollLeft - clientWidth <= 0) {\n this.__state = 'scrolled';\n }\n }\n\n private __handleMouseMove(evt: MouseEvent) {\n if (!this.__state.startsWith('idle')) return;\n\n if (this.__scrollTimeout !== null) clearTimeout(this.__scrollTimeout);\n const ratio = evt.offsetX / this.__scroll.clientWidth;\n\n if (ratio >= 0.9) {\n this.__state = 'idle-preview';\n this.__scrollTimeout = setTimeout(() => {\n this.__state = 'scroll-started';\n this.__scroll.scroll({\n top: 0,\n left: this.__content.clientWidth,\n behavior: 'smooth',\n });\n }, 75);\n }\n }\n}\n"]}
1	+ {"version":3,"file":"SwipeActions.js","sourceRoot":"","sources":["../../../../src/elements/public/SwipeActions/SwipeActions.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResult, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { LitElement, css, html } from 'lit-element';\n\n/*\n A utility element for adding swipe actions to cards or list items. Usage:\n \n ```html\n * <foxy-swipe-actions>\n * <foxy-customer-card></foxy-customer-card>\n * <button slot=\"action\">Edit</button>\n * <button slot=\"action\">Delete</button>\n * </foxy-swipe-actions>\n * ```\n \n @element foxy-swipe-actions\n * @since 1.17.0\n */\nexport class SwipeActions extends LitElement {\n static get properties(): PropertyDeclarations {\n return {\n __state: { attribute: false },\n };\n }\n\n static get styles(): CSSResult {\n return css`\n #root {\n display: block;\n overflow: hidden;\n }\n\n #scroll {\n margin-bottom: calc(0px - var(--scrollbar-height, 24px));\n overflow: scroll hidden;\n white-space: nowrap;\n scroll-snap-type: x mandatory;\n display: flex;\n }\n\n #content {\n scroll-snap-align: start;\n width: 100%;\n flex-shrink: 0;\n }\n\n #content-transform-target {\n transition: transform 0.15s ease;\n }\n\n .idle-preview #content-transform-target {\n transform: translateX(calc(0px - var(--lumo-space-s)));\n }\n\n #action {\n scroll-snap-align: end;\n flex-shrink: 0;\n }\n `;\n }\n\n private __state: 'idle' \| 'idle-preview' \| 'scroll-started' \| 'scrolled' = 'idle';\n\n private __scrollTimeout: NodeJS.Timeout \| null = null;\n\n render(): TemplateResult {\n return html`\n <div\n class=${this.__state}\n id=\"root\"\n @mouseleave=${() => this.__closeActions('smooth')}\n @mousemove=${this.__handleMouseMove}\n @focusout=${() => this.__closeActions('auto')}\n >\n <div id=\"scroll\" @scroll=${this.__handleScroll}>\n <div id=\"content\">\n <div id=\"content-transform-target\">\n <slot></slot>\n </div>\n </div>\n <div id=\"action\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n\n firstUpdated(changes: Map<keyof this, unknown>): void {\n super.firstUpdated(changes);\n const scroll = this.__scroll;\n const root = this.renderRoot.querySelector('#root') as HTMLElement;\n root.style.setProperty('--scrollbar-height', `${scroll.offsetHeight - scroll.clientHeight}px`);\n }\n\n private get __scroll() {\n return this.renderRoot.querySelector('#scroll') as HTMLElement;\n }\n\n private get __content() {\n return this.renderRoot.querySelector('#content') as HTMLElement;\n }\n\n private __closeActions(behavior?: 'auto' \| 'smooth'): void {\n if (this.__scrollTimeout !== null) clearTimeout(this.__scrollTimeout);\n\n this.__scroll.scroll({\n top: 0,\n left: 0,\n behavior,\n });\n\n this.__state = 'idle';\n }\n\n private __handleScroll() {\n const { scrollLeft, scrollWidth, clientWidth } = this.__scroll;\n\n if (scrollLeft <= 0) {\n this.__state = 'idle';\n } else if (scrollWidth - scrollLeft - clientWidth <= 0) {\n this.__state = 'scrolled';\n }\n }\n\n private __handleMouseMove(evt: MouseEvent) {\n if (!this.__state.startsWith('idle')) return;\n\n if (this.__scrollTimeout !== null) clearTimeout(this.__scrollTimeout);\n const ratio = evt.offsetX / this.__scroll.clientWidth;\n\n if (ratio >= 0.9) {\n this.__state = 'idle-preview';\n this.__scrollTimeout = setTimeout(() => {\n this.__state = 'scroll-started';\n this.__scroll.scroll({\n top: 0,\n left: this.__content.clientWidth,\n behavior: 'smooth',\n });\n }, 75);\n }\n }\n}\n"]}

package/dist/mixins/themeable.js CHANGED Viewed

@@ -457,11 +457,6 @@ option{
   left: var(--lumo-space-m, 1rem);
 }
-.inset-x-0 {
-  left: 0;
-  right: 0;
-}
 .top-0 {
   top: 0;
 }
@@ -478,10 +473,6 @@ option{
   right: var(--lumo-space-m, 1rem);
 }
-.bottom-0 {
-  bottom: 0;
-}
 .bottom {
   bottom: var(--lumo-space-m, 1rem);
 }
@@ -975,10 +966,6 @@ option{
   table-layout: fixed;
 }
-.origin-top {
-  transform-origin: top;
-}
 .origin-top-right {
   transform-origin: top right;
 }
@@ -1067,11 +1054,6 @@ 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;

package/dist/mixins/themeable.js.map CHANGED Viewed

	@@ -1 +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"]}
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"]}

package/package.json CHANGED Viewed

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

package/dist/cdn/shared-0662adb7.js DELETED Viewed

@@ -1 +0,0 @@

- import"./shared-7b3aac7e.js";import"./shared-986d0f7f.js";const n=document.createElement("template");n.innerHTML='<dom-module id="lumo-menu-overlay-core">\n <template>\n <style>\n :host([opening]),\n :host([closing]) {\n animation: 0.14s lumo-overlay-dummy-animation;\n }\n\n [part="overlay"] {\n will-change: opacity, transform;\n }\n\n :host([opening]) [part="overlay"] {\n animation: 0.1s lumo-menu-overlay-enter ease-out both;\n }\n\n @keyframes lumo-menu-overlay-enter {\n 0% {\n opacity: 0;\n transform: translateY(-4px);\n }\n }\n\n :host([closing]) [part="overlay"] {\n animation: 0.1s lumo-menu-overlay-exit both;\n }\n\n @keyframes lumo-menu-overlay-exit {\n 100% {\n opacity: 0;\n }\n }\n </style>\n </template>\n</dom-module><dom-module id="lumo-menu-overlay">\n <template>\n <style include="lumo-overlay lumo-menu-overlay-core">\n /* Small viewport (bottom sheet) styles */\n /* Use direct media queries instead of the state attributes (`[phone]` and `[fullscreen]`) provided by the elements */\n @media (max-width: 420px), (max-height: 420px) {\n :host {\n top: 0 !important;\n right: 0 !important;\n bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;\n left: 0 !important;\n align-items: stretch !important;\n justify-content: flex-end !important;\n }\n\n [part="overlay"] {\n max-height: 50vh;\n width: 100vw;\n border-radius: 0;\n box-shadow: var(--lumo-box-shadow-xl);\n }\n\n /* The content part scrolls instead of the overlay part, because of the gradient fade-out */\n [part="content"] {\n padding: 30px var(--lumo-space-m);\n max-height: inherit;\n box-sizing: border-box;\n -webkit-overflow-scrolling: touch;\n overflow: auto;\n -webkit-mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);\n mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);\n }\n\n [part="backdrop"] {\n display: block;\n }\n\n /* Animations */\n\n :host([opening]) [part="overlay"] {\n animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(.215, .61, .355, 1) both;\n }\n\n :host([closing]),\n :host([closing]) [part="backdrop"] {\n animation-delay: 0.14s;\n }\n\n :host([closing]) [part="overlay"] {\n animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(.55, .055, .675, .19) both;\n }\n }\n\n @keyframes lumo-mobile-menu-overlay-enter {\n 0% {\n transform: translateY(150%);\n }\n }\n\n @keyframes lumo-mobile-menu-overlay-exit {\n 100% {\n transform: translateY(150%);\n }\n }\n </style>\n </template>\n</dom-module>',document.head.appendChild(n.content);