@foxy.io/elements 1.36.0 → 1.37.0-beta.2

package/dist/cdn/translations/experimental-add-to-cart-builder/en.json

@@ -278,6 +278,9 @@
         },
         "custom-options": {
           "label": "Custom options",
+          "helper_text": "",
+          "total_items": "{{ count }} option",
+          "total_items_plural": "{{ count }} options",
           "delete_header": "Remove custom option?",
           "delete_message": "Please confirm that you'd like to remove this custom option from the product.",
           "delete_confirm": "Remove",
@@ -444,7 +447,7 @@
             "first": "First",
             "last": "Last",
             "next": "Next",
-            "pagination": "{{from}}-{{to}} out of {{total}}",
+            "pagination": "{{from}}-{{to}}",
             "previous": "Previous"
           }
         },

package/dist/cdn/translations/gift-card-code-form/en.json

@@ -36,6 +36,7 @@
     "end-date": {
       "label": "Expires on",
       "placeholder": "Optional",
+      "display_value": "{{ value, date }}",
       "helper_text": ""
     }
   },

package/dist/cdn/translations/gift-card-form/en.json

@@ -403,6 +403,7 @@
           "end-date": {
             "label": "Expires on",
             "placeholder": "Optional",
+            "display_value": "{{ value, date }}",
             "helper_text": ""
           }
         },

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

@@ -1710,6 +1710,9 @@
     },
     "subscription": {
       "caption": "Go to subscription"
+    },
+    "receipt": {
+      "caption": "View receipt"
     }
   },
   "spinner": {

package/dist/cdn/translations/user-invitation-form/en.json

@@ -7,11 +7,11 @@
   "admin_status_title_rejected": "Invitation rejected",
   "admin_status_title_accepted": "This user is a store admin",
   "admin_status_title_expired": "Invitation expired",
-  "admin_status_text_revoked": "This user may have been an admin in the past but has no access to this store at the moment. We will keep this record for historical purposes. To restore this user's access, resend the invitation using the button below.",
+  "admin_status_text_revoked": "This user may have been an admin in the past but has no access to this store at the moment. We will keep this record for historical purposes. To restore this user's access, delete the invitation using the button below and invite the user again.",
   "admin_status_text_sent": "We've sent an email to this user asking them to join this store. Once they accept, they will be granted full admin access. If they don't accept within 2 weeks, this invitation will expire.",
   "admin_status_text_rejected": "If this was a mistake, ask the user to delete this invitation in profile settings. You will be able to invite them again after that.",
   "admin_status_text_accepted": "They have full access to this store, including the ability to add and remove users.",
-  "admin_status_text_expired": "This invitation has expired. You can resend this invitation using the button below.",
+  "admin_status_text_expired": "This invitation has expired. To add this user again, please delete this invitation and create a new one.",
   "user_status_title_rejected": "You've rejected an invitation to join {{ store_name }} as administrator",
   "user_status_title_accepted": "You're a store administrator at {{ store_name }}",
   "user_status_title_revoked": "You no longer have access to {{ store_name }}",
@@ -21,7 +21,7 @@
   "user_status_text_accepted": "If you'd like to leave this store, you can do so by pressing the button below. Please note that if you'd like to join again, the store owner will need to invite you.",
   "user_status_text_revoked": "If you'd like to join this store again, please ask the store owner to reactivate your access in settings.",
   "user_status_text_sent": "Accepting this invitation will grant you full access to this store. Rejecting it will prevent this store from inviting you again.",
-  "user_status_text_expired": "To join this store, please ask the store owner to delete this invitation and invite you again.",
+  "user_status_text_expired": "To join this store, please ask the store owner to reactivate your access in settings.",
   "full_name": "{{ first_name }} {{ last_name }}",
   "full_name_empty": "Unknown User",
   "leave": {

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

@@ -17,6 +17,8 @@ export declare class InternalAsyncListControl extends InternalEditableControl {
     bulkActions: BulkAction<HALJSONResource>[];
     /** Same as the `related` property of `NucleonElement`. */
     related: string[];
+    /** When set to `details`, makes the entire control collapsible. */
+    layout: 'details' | null;
     /** Swipe actions. */
     actions: SwipeAction<HALJSONResource>[];
     /** Query parameters to apply to the `first` URL. */
@@ -35,6 +37,10 @@ export declare class InternalAsyncListControl extends InternalEditableControl {
     itemProps: Record<string, unknown>;
     /** Same as the `wide` property of `FormDialog`. */
     wide: boolean;
+    /** Visually hides the control when the collection is empty or loading. */
+    hideWhenEmpty: boolean;
+    /** Same as the `open` property of `InternalSummaryControl`. */
+    open: boolean;
     /** Same as the `alert` property of `FormDialog`. */
     alert: boolean;
     /** Hides Delete Swipe Action if true. */
@@ -49,10 +55,14 @@ export declare class InternalAsyncListControl extends InternalEditableControl {
     private __isFilterVisible;
     private __notification;
     private __isSelecting;
+    private __totalItems;
     private __selection;
     private __itemRenderer;
     private __filter;
+    render(): TemplateResult;
     renderControl(): TemplateResult;
-    private get __dialog();
     private get __cardRenderer();
+    private get __dialog();
+    private __renderActions;
+    private __renderContent;
 }

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

@@ -16,6 +16,8 @@ export class InternalAsyncListControl extends InternalEditableControl {
         this.bulkActions = [];
         /** Same as the `related` property of `NucleonElement`. */
         this.related = [];
+        /** When set to `details`, makes the entire control collapsible. */
+        this.layout = null;
         /** Swipe actions. */
         this.actions = [];
         /** Query parameters to apply to the `first` URL. */
@@ -34,6 +36,10 @@ export class InternalAsyncListControl extends InternalEditableControl {
         this.itemProps = {};
         /** Same as the `wide` property of `FormDialog`. */
         this.wide = false;
+        /** Visually hides the control when the collection is empty or loading. */
+        this.hideWhenEmpty = false;
+        /** Same as the `open` property of `InternalSummaryControl`. */
+        this.open = false;
         /** Same as the `alert` property of `FormDialog`. */
         this.alert = false;
         /** Hides Delete Swipe Action if true. */
@@ -48,15 +54,18 @@ export class InternalAsyncListControl extends InternalEditableControl {
         this.__isFilterVisible = false;
         this.__notification = null;
         this.__isSelecting = false;
+        this.__totalItems = 0;
         this.__selection = [];
         this.__itemRenderer = ctx => {
             var _a;
+            const item = this.__cardRenderer(ctx);
+            const readonlyItem = html `<div class="bg-contrast-5">${item}</div>`;
             if (!ctx.data)
-                return this.__cardRenderer(ctx);
+                return readonlyItem;
             if (this.__isSelecting) {
                 return html `
         <vaadin-checkbox
-          class="block w-full"
+          class=${classMap({ 'block w-full': true, 'bg-contrast-5': this.layout === 'details' })}
           style="padding-left: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
           data-async-list-control
           ?disabled=${this.disabled || !!this.__activeBulkAction}
@@ -76,16 +85,16 @@ export class InternalAsyncListControl extends InternalEditableControl {
             }
             const href = (_a = this.getPageHref) === null || _a === void 0 ? void 0 : _a.call(this, ctx.href, ctx.data);
             if (typeof href !== 'string' && !this.form)
-                return this.__cardRenderer(ctx);
+                return readonlyItem;
             const isDisabled = this.disabledSelector.matches('card', true);
             const card = this.__cardRenderer(ctx);
             let clickableItem;
             const wrapperClass = classMap({
-                'rounded-t': !ctx.previous,
+                'rounded-t': this.layout !== 'details' && !ctx.previous,
                 'rounded-b': !ctx.next,
                 'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,
-                'text-left w-full block transition-colors': true,
-                'hover-bg-contrast-5': !isDisabled,
+                'text-left w-full block bg-contrast-5 transition-colors': true,
+                'hover-bg-contrast-10': !isDisabled,
             });
             if (this.getPageHref) {
                 if (isDisabled) {
@@ -189,6 +198,7 @@ export class InternalAsyncListControl extends InternalEditableControl {
             createPageHref: { attribute: 'create-page-href' },
             getPageHref: { attribute: false },
             related: { type: Array },
+            layout: {},
             first: {},
             limit: { type: Number },
             form: {},
@@ -196,36 +206,34 @@ export class InternalAsyncListControl extends InternalEditableControl {
             item: {},
             itemProps: { type: Object, attribute: 'item-props' },
             wide: { type: Boolean },
+            open: { type: Boolean },
+            hideWhenEmpty: { type: Boolean, attribute: 'hide-when-empty' },
             alert: { type: Boolean },
             actions: { attribute: false },
             bulkActions: { attribute: false },
             filters: { type: Array },
             __filter: { attribute: false },
             __selection: { attribute: false },
+            __totalItems: { attribute: false },
             __isSelecting: { attribute: false },
             __notification: { attribute: false },
             __isFilterVisible: { attribute: false },
             __activeBulkAction: { attribute: false },
         };
     }
+    render() {
+        const hidden = this.hideWhenEmpty && !this.__totalItems;
+        return html `<div class=${classMap({ hidden })}>${super.render()}</div>`;
+    }
     renderControl() {
-        var _a, _b, _c;
-        let first;
-        try {
-            const url = new URL((_a = this.first) !== null && _a !== void 0 ? _a : '');
-            const filter = new URLSearchParams(this.__filter);
-            url.searchParams.set('limit', String(this.limit));
-            filter.forEach((value, key) => url.searchParams.set(key, value));
-            first = url.toString();
-        }
-        catch (_d) {
-            first = undefined;
-        }
+        var _a, _b;
+        const actions = this.__renderActions();
+        const content = this.__renderContent();
         return html `
       ${this.form && !this.__isSelecting
             ? html `
             <foxy-form-dialog
-              parent=${ifDefined((_b = this.first) !== null && _b !== void 0 ? _b : void 0)}
+              parent=${ifDefined((_a = this.first) !== null && _a !== void 0 ? _a : void 0)}
               infer="dialog"
               id="form"
               ?wide=${this.wide}
@@ -258,157 +266,54 @@ export class InternalAsyncListControl extends InternalEditableControl {
             >
             </foxy-internal-confirm-dialog>
           `}
-      <div class="flex gap-m items-center justify-between text-l font-medium">
-        <span class="text-body mr-auto">
-          ${this.label && this.label !== 'label' ? this.label : ''}
-        </span>
-
-        ${this.filters.length > 0 && !this.__isSelecting
+      ${this.layout === 'details'
             ? html `
-              <foxy-internal-async-list-control-filter-overlay
-                .noVerticalOverlap=${true}
-                .positionTarget=${this.renderRoot.querySelector('#filters')}
-                .model=${{
-                options: this.filters,
-                value: this.__filter,
-                lang: this.lang,
-                ns: this.ns,
-            }}
-                ?opened=${this.__isFilterVisible}
-                @vaadin-overlay-close=${() => (this.__isFilterVisible = false)}
-                @search=${(evt) => {
-                var _a;
-                this.__filter = (_a = evt.detail) !== null && _a !== void 0 ? _a : '';
+            <foxy-internal-summary-control
+              layout="details"
+              count=${ifDefined(this.open ? void 0 : `${this.__totalItems}`)}
+              infer=""
+              ?open=${this.open}
+              @toggle=${(evt) => {
+                const summary = evt.currentTarget;
+                this.open = summary.open;
+                if (!evt.composed && !evt.bubbles)
+                    this.dispatchEvent(new CustomEvent('toggle'));
             }}
-              >
-              </foxy-internal-async-list-control-filter-overlay>
-
-              <vaadin-button
-                theme="tertiary-inline contrast"
-                id="filters"
-                ?disabled=${this.disabled}
-                @click=${() => (this.__isFilterVisible = !this.__isFilterVisible)}
-              >
-                <foxy-i18n infer="pagination" key="search_button_text"></foxy-i18n>
-              </vaadin-button>
-            `
-            : ''}
-        ${this.bulkActions.length > 0 && this.first
-            ? html `
-              ${this.__selection.length > 0
-                ? this.bulkActions.map(action => {
-                    var _a;
-                    const nPrefix = `${action.name}_bulk_action_notification`;
-                    const cPrefix = `${action.name}_bulk_action_caption`;
-                    const isActive = ((_a = this.__activeBulkAction) === null || _a === void 0 ? void 0 : _a.name) === action.name;
-                    return html `
-                      <vaadin-button
-                        data-testclass="bulk-action"
-                        theme="tertiary-inline"
-                        ?disabled=${this.disabled || !!this.__activeBulkAction}
-                        @click=${async () => {
-                        var _a;
-                        this.__activeBulkAction = action;
-                        try {
-                            await action.onClick(this.__selection);
-                            this.__selection = [];
-                            this.__isSelecting = false;
-                            this.__notification = { key: `${nPrefix}_done`, theme: 'success' };
-                        }
-                        catch (_b) {
-                            this.__notification = { key: `${nPrefix}_fail`, theme: 'error' };
-                        }
-                        finally {
-                            this.__activeBulkAction = null;
-                            (_a = this.renderRoot.querySelector('vaadin-notification')) === null || _a === void 0 ? void 0 : _a.open();
-                        }
-                    }}
+            >
+              ${actions.length
+                ? html `
+                    <div class="flex gap-s">
+                      <foxy-i18n
+                        infer=""
+                        class="mr-auto text-tertiary"
+                        key="total_items"
+                        .options=${{ count: this.__totalItems }}
                       >
-                        <foxy-i18n
-                          infer="pagination"
-                          key="${cPrefix}_${isActive ? 'busy' : 'idle'}"
-                          .options=${{ count: this.__selection.length }}
-                        >
-                        </foxy-i18n>
-                      </vaadin-button>
-                    `;
-                })
+                      </foxy-i18n>
+                      ${actions}
+                    </div>
+                  `
                 : ''}
-              <vaadin-button
-                theme="tertiary-inline contrast"
-                ?disabled=${this.disabled || !!this.__activeBulkAction}
-                @click=${() => {
-                this.__isSelecting = !this.__isSelecting;
-                this.__selection = [];
-            }}
-              >
-                <foxy-i18n
-                  infer="pagination"
-                  key=${this.__isSelecting ? 'cancel_button_text' : 'select_button_text'}
-                >
-                </foxy-i18n>
-              </vaadin-button>
-            `
-            : ''}
-        ${(!this.form && !this.createPageHref) ||
-            this.readonly ||
-            this.hideCreateButton ||
-            this.__isSelecting
-            ? ''
-            : this.createPageHref && !this.disabled
-                ? html `
-              <a
-                class="rounded-s text-primary group focus-outline-none focus-ring-2 focus-ring-primary-50"
-                href=${this.createPageHref}
-              >
-                <foxy-i18n
-                  class="transition-opacity group-hover-opacity-80"
-                  infer=""
-                  key="create_button_text"
-                >
-                </foxy-i18n>
-              </a>
-            `
-                : html `
-              <vaadin-button
-                theme="tertiary-inline"
-                ?disabled=${this.disabled}
-                @click=${(evt) => {
-                    evt.preventDefault();
-                    evt.stopPropagation();
-                    const dialog = this.__dialog;
-                    const button = evt.currentTarget;
-                    dialog.header = 'header_create';
-                    dialog.href = '';
-                    dialog.show(button);
-                }}
-              >
-                <foxy-i18n infer="pagination" key="create_button_text"></foxy-i18n>
-              </vaadin-button>
-            `}
-      </div>
+              <div class="p-0 bg-transparent">${content}</div>
+            </foxy-internal-summary-control>
+          `
+            : html `
+            <div class="flex gap-s items-center justify-between font-medium">
+              <span class="text-body mr-auto text-l">
+                ${this.label && this.label !== 'label' ? this.label : ''}
+              </span>
+              ${actions}
+            </div>
 
-      <div
-        class="text-secondary text-s"
-        ?hidden=${!this.helperText || this.helperText === 'helper_text'}
-      >
-        ${this.helperText}
-      </div>
+            <div
+              class="text-secondary text-s"
+              ?hidden=${!this.helperText || this.helperText === 'helper_text'}
+            >
+              ${this.helperText}
+            </div>
 
-      <foxy-pagination first=${ifDefined(first)} infer="pagination">
-        <foxy-collection-page
-          class=${classMap({
-            'block divide-y divide-contrast-5 bg-contrast-5 rounded overflow-hidden': true,
-            'mt-s': (!!this.label && this.label !== 'label') ||
-                (!!this.helperText && this.helperText !== 'helper_text'),
-        })}
-          infer="card"
-          .related=${this.related}
-          .props=${this.itemProps}
-          .item=${this.__itemRenderer}
-        >
-        </foxy-collection-page>
-      </foxy-pagination>
+            ${content}
+          `}
 
       <div
         class="mt-s text-s leading-xs text-error"
@@ -420,7 +325,7 @@ export class InternalAsyncListControl extends InternalEditableControl {
       <vaadin-notification
         position="bottom-end"
         duration="3000"
-        theme=${ifDefined((_c = this.__notification) === null || _c === void 0 ? void 0 : _c.theme)}
+        theme=${ifDefined((_b = this.__notification) === null || _b === void 0 ? void 0 : _b.theme)}
         .renderer=${(root) => {
             var _a, _b;
             if (!root.firstElementChild)
@@ -441,9 +346,6 @@ export class InternalAsyncListControl extends InternalEditableControl {
       </vaadin-notification>
     `;
     }
-    get __dialog() {
-        return this.renderRoot.querySelector('#form');
-    }
     get __cardRenderer() {
         var _a;
         const item = this.item;
@@ -470,5 +372,179 @@ export class InternalAsyncListControl extends InternalEditableControl {
         }
         return this.__cachedCardRenderer.render;
     }
+    get __dialog() {
+        return this.renderRoot.querySelector('#form');
+    }
+    __renderActions() {
+        return [
+            this.filters.length > 0 && !this.__isSelecting
+                ? html `
+            <foxy-internal-async-list-control-filter-overlay
+              .noVerticalOverlap=${true}
+              .positionTarget=${this.renderRoot.querySelector('#filters')}
+              .model=${{
+                    options: this.filters,
+                    value: this.__filter,
+                    lang: this.lang,
+                    ns: this.ns,
+                }}
+              ?opened=${this.__isFilterVisible}
+              @vaadin-overlay-close=${() => (this.__isFilterVisible = false)}
+              @search=${(evt) => {
+                    var _a;
+                    this.__filter = (_a = evt.detail) !== null && _a !== void 0 ? _a : '';
+                }}
+            >
+            </foxy-internal-async-list-control-filter-overlay>
+
+            <vaadin-button
+              theme="tertiary-inline contrast"
+              id="filters"
+              ?disabled=${this.disabled}
+              @click=${() => (this.__isFilterVisible = !this.__isFilterVisible)}
+            >
+              <foxy-i18n infer="pagination" key="search_button_text"></foxy-i18n>
+            </vaadin-button>
+          `
+                : '',
+            this.bulkActions.length > 0 && this.first
+                ? html `
+            ${this.__selection.length > 0
+                    ? this.bulkActions.map(action => {
+                        var _a;
+                        const nPrefix = `${action.name}_bulk_action_notification`;
+                        const cPrefix = `${action.name}_bulk_action_caption`;
+                        const isActive = ((_a = this.__activeBulkAction) === null || _a === void 0 ? void 0 : _a.name) === action.name;
+                        return html `
+                    <vaadin-button
+                      data-testclass="bulk-action"
+                      theme="tertiary-inline"
+                      ?disabled=${this.disabled || !!this.__activeBulkAction}
+                      @click=${async () => {
+                            var _a;
+                            this.__activeBulkAction = action;
+                            try {
+                                await action.onClick(this.__selection);
+                                this.__selection = [];
+                                this.__isSelecting = false;
+                                this.__notification = { key: `${nPrefix}_done`, theme: 'success' };
+                            }
+                            catch (_b) {
+                                this.__notification = { key: `${nPrefix}_fail`, theme: 'error' };
+                            }
+                            finally {
+                                this.__activeBulkAction = null;
+                                (_a = this.renderRoot.querySelector('vaadin-notification')) === null || _a === void 0 ? void 0 : _a.open();
+                            }
+                        }}
+                    >
+                      <foxy-i18n
+                        infer="pagination"
+                        key="${cPrefix}_${isActive ? 'busy' : 'idle'}"
+                        .options=${{ count: this.__selection.length }}
+                      >
+                      </foxy-i18n>
+                    </vaadin-button>
+                  `;
+                    })
+                    : ''}
+            <vaadin-button
+              theme="tertiary-inline contrast"
+              ?disabled=${this.disabled || !!this.__activeBulkAction}
+              @click=${() => {
+                    this.__isSelecting = !this.__isSelecting;
+                    this.__selection = [];
+                }}
+            >
+              <foxy-i18n
+                infer="pagination"
+                key=${this.__isSelecting ? 'cancel_button_text' : 'select_button_text'}
+              >
+              </foxy-i18n>
+            </vaadin-button>
+          `
+                : '',
+            (!this.form && !this.createPageHref) ||
+                this.readonly ||
+                this.hideCreateButton ||
+                this.__isSelecting
+                ? ''
+                : this.createPageHref && !this.disabled
+                    ? html `
+            <a
+              class="rounded-s text-primary group focus-outline-none focus-ring-2 focus-ring-primary-50"
+              href=${this.createPageHref}
+            >
+              <foxy-i18n
+                class="transition-opacity group-hover-opacity-80"
+                infer=""
+                key="create_button_text"
+              >
+              </foxy-i18n>
+            </a>
+          `
+                    : html `
+            <vaadin-button
+              theme="tertiary-inline"
+              ?disabled=${this.disabled}
+              @click=${(evt) => {
+                        evt.preventDefault();
+                        evt.stopPropagation();
+                        const dialog = this.__dialog;
+                        const button = evt.currentTarget;
+                        dialog.header = 'header_create';
+                        dialog.href = '';
+                        dialog.show(button);
+                    }}
+            >
+              <foxy-i18n infer="pagination" key="create_button_text"></foxy-i18n>
+            </vaadin-button>
+          `,
+        ].filter(v => !!v);
+    }
+    __renderContent() {
+        var _a;
+        const helperText = this.helperText;
+        const isDetails = this.layout === 'details';
+        const label = this.label;
+        let first;
+        try {
+            const url = new URL((_a = this.first) !== null && _a !== void 0 ? _a : '');
+            const filter = new URLSearchParams(this.__filter);
+            url.searchParams.set('limit', String(this.limit));
+            filter.forEach((value, key) => url.searchParams.set(key, value));
+            first = url.toString();
+        }
+        catch (_b) {
+            first = undefined;
+        }
+        return html `
+      <foxy-pagination
+        first=${ifDefined(first)}
+        infer="pagination"
+        class=${classMap({ hidden: isDetails && this.__totalItems === 0 })}
+      >
+        <foxy-collection-page
+          class=${classMap({
+            'grid grid-cols-1 overflow-hidden': true,
+            'rounded': !isDetails,
+            'mt-s': !isDetails &&
+                ((!!label && label !== 'label') || (!!helperText && helperText !== 'helper_text')),
+        })}
+          style="gap: 1px"
+          infer="card"
+          .related=${this.related}
+          .props=${this.itemProps}
+          .item=${this.__itemRenderer}
+          @update=${(evt) => {
+            var _a, _b;
+            const page = evt.currentTarget;
+            this.__totalItems = parseInt((_b = (_a = page.data) === null || _a === void 0 ? void 0 : _a.total_items) !== null && _b !== void 0 ? _b : 0);
+        }}
+        >
+        </foxy-collection-page>
+      </foxy-pagination>
+    `;
+    }
 }
 //# sourceMappingURL=InternalAsyncListControl.js.map