@foxy.io/elements 1.41.0-beta.3 → 1.41.0-beta.5

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

@@ -1679,68 +1679,48 @@
   },
   "actions": {
     "capture": {
-      "button": {
-        "idle": "Capture",
-        "busy": "Processing..."
-      },
-      "notification": {
-        "success": "Captured successfully",
-        "error": "Failed to capture"
-      },
-      "confirm-dialog": {
-        "message": "This will attempt to capture this transaction. Would you like to proceed?",
-        "confirm": "Yes",
-        "cancel": "No",
-        "header": "Capture"
-      }
+      "message_idle": "This action will attempt to capture this transaction. Would you like to proceed?",
+      "message_fail": "Failed to capture this transaction. If you'd like to retry, close this dialog and click the capture button again.",
+      "message_done": "Transaction was captured successfully. You can close this dialog now.",
+      "button_close": "Close",
+      "button_confirm": "Capture",
+      "button_cancel": "Go back",
+      "loading_busy": "Processing",
+      "header": "Capture",
+      "button": "Capture"
     },
     "void": {
-      "button": {
-        "idle": "Void",
-        "busy": "Processing..."
-      },
-      "notification": {
-        "success": "Voided successfully",
-        "error": "Failed to void"
-      },
-      "confirm-dialog": {
-        "message": "This will attempt to void this transaction. Would you like to proceed?",
-        "confirm": "Yes",
-        "cancel": "No",
-        "header": "Void"
-      }
+      "message_idle": "This action will attempt to void this transaction. Would you like to proceed?",
+      "message_fail": "Failed to void this transaction. If you'd like to retry, close this dialog and click the void button again.",
+      "message_done": "Transaction was voided successfully. You can close this dialog now.",
+      "button_close": "Close",
+      "button_confirm": "Void",
+      "button_cancel": "Go back",
+      "loading_busy": "Processing",
+      "header": "Void",
+      "button": "Void"
     },
     "refund": {
-      "button": {
-        "idle": "Refund",
-        "busy": "Processing..."
-      },
-      "notification": {
-        "success": "Refunded successfully",
-        "error": "Failed to refund"
-      },
-      "confirm-dialog": {
-        "message": "This will attempt to refund this transaction. Would you like to proceed?",
-        "confirm": "Yes",
-        "cancel": "No",
-        "header": "Refund"
-      }
+      "message_idle": "This action will attempt to refund the full amount of this transaction. Would you like to proceed?",
+      "message_fail": "Failed to refund this transaction. If you'd like to retry, close this dialog and click the refund button again.",
+      "message_done": "Transaction was refunded successfully. You can close this dialog now.",
+      "button_close": "Close",
+      "button_confirm": "Refund",
+      "button_cancel": "Go back",
+      "loading_busy": "Processing",
+      "header": "Refund",
+      "button": "Refund"
     },
     "send-emails": {
-      "button": {
-        "idle": "Resend emails",
-        "busy": "Sending..."
-      },
-      "notification": {
-        "success": "Emails resent successfully",
-        "error": "Failed to resend emails"
-      },
-      "confirm-dialog": {
-        "message": "This will attempt to resend emails for this transaction. Would you like to proceed?",
-        "confirm": "Yes",
-        "cancel": "No",
-        "header": "Resend emails"
-      }
+      "message_idle": "This action will attempt to resend emails for this transaction. Would you like to proceed?",
+      "message_fail": "Failed to resend emails for this transaction. If you'd like to retry, close this dialog and click the resend emails button again.",
+      "message_done": "Emails for this transaction were resent successfully. You can close this dialog now.",
+      "button_close": "Close",
+      "button_confirm": "Resend emails",
+      "button_cancel": "Go back",
+      "loading_busy": "Processing",
+      "header": "Resend emails",
+      "button": "Resend emails"
     },
     "subscription": {
       "caption": "Go to subscription"

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

@@ -5,9 +5,5 @@ export declare class InternalPostActionControl extends InternalControl {
     messageOptions: Record<string, string>;
     theme: string | null;
     href: string | null;
-    private __buttonState;
-    private readonly __api;
     renderControl(): TemplateResult;
-    private __sendPost;
-    private __getNotificationRenderer;
 }

package/dist/elements/internal/InternalPostActionControl/InternalPostActionControl.js

@@ -1,15 +1,12 @@
 import { InternalControl } from "../InternalControl/InternalControl.js";
-import { html, render } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { API } from "../../public/NucleonElement/API.js";
+import { html } from 'lit-html';
 export class InternalPostActionControl extends InternalControl {
     constructor() {
         super(...arguments);
         this.messageOptions = {};
         this.theme = null;
         this.href = null;
-        this.__buttonState = 'idle';
-        this.__api = new API(this);
     }
     static get properties() {
         return {
@@ -17,82 +14,34 @@ export class InternalPostActionControl extends InternalControl {
             messageOptions: { type: Object, attribute: 'message-options' },
             theme: {},
             href: {},
-            __buttonState: {},
         };
     }
     renderControl() {
-        var _a;
+        var _a, _b;
         return html `
-      <foxy-internal-confirm-dialog
-        header="header"
-        infer="confirm-dialog"
-        id="confirm-dialog"
-        .messageOptions=${this.messageOptions}
+      <foxy-internal-post-action-control-dialog
+        message-options=${JSON.stringify(this.messageOptions)}
+        infer=""
+        href=${ifDefined((_a = this.href) !== null && _a !== void 0 ? _a : void 0)}
         @hide=${(evt) => {
             if (!evt.detail.cancelled)
-                this.__sendPost();
+                this.dispatchEvent(new CustomEvent('success'));
         }}
       >
-      </foxy-internal-confirm-dialog>
-
-      <vaadin-notification
-        position="bottom-end"
-        duration="3000"
-        theme="success"
-        id="success-notification"
-        .renderer=${this.__getNotificationRenderer('success')}
-      >
-      </vaadin-notification>
-
-      <vaadin-notification
-        position="bottom-end"
-        duration="3000"
-        theme="error"
-        id="error-notification"
-        .renderer=${this.__getNotificationRenderer('error')}
-      >
-      </vaadin-notification>
+      </foxy-internal-post-action-control-dialog>
 
       <vaadin-button
-        theme=${ifDefined((_a = this.theme) !== null && _a !== void 0 ? _a : void 0)}
-        ?disabled=${this.disabled || this.readonly || this.__buttonState !== 'idle'}
+        theme=${ifDefined((_b = this.theme) !== null && _b !== void 0 ? _b : void 0)}
+        ?disabled=${this.disabled || this.readonly}
         @click=${(evt) => {
             const button = evt.currentTarget;
-            const dialog = this.renderRoot.querySelector('#confirm-dialog');
+            const dialog = this.renderRoot.querySelector('foxy-internal-post-action-control-dialog');
             dialog === null || dialog === void 0 ? void 0 : dialog.show(button);
         }}
       >
-        <foxy-i18n infer="button" key=${this.__buttonState}></foxy-i18n>
+        <foxy-i18n infer="" key="button"></foxy-i18n>
       </vaadin-button>
     `;
     }
-    async __sendPost() {
-        if (this.href && this.__buttonState === 'idle') {
-            this.__buttonState = 'busy';
-            const response = await this.__api.fetch(this.href, { method: 'POST' });
-            const result = response.ok ? 'success' : 'error';
-            const selector = `#${result}-notification`;
-            const notification = this.renderRoot.querySelector(selector);
-            notification === null || notification === void 0 ? void 0 : notification.open();
-            this.__buttonState = 'idle';
-            this.dispatchEvent(new CustomEvent(result));
-        }
-    }
-    __getNotificationRenderer(state) {
-        return (root) => {
-            if (!root.firstElementChild)
-                root.innerHTML = '<span></span>';
-            const layout = html `
-        <foxy-i18n
-          style="color: var(--lumo-${state}-contrast-color)"
-          lang=${this.lang}
-          key=${state}
-          ns="${this.ns} notification"
-        >
-        </foxy-i18n>
-      `;
-            render(layout, root.firstElementChild);
-        };
-    }
 }
 //# sourceMappingURL=InternalPostActionControl.js.map

package/dist/elements/internal/InternalPostActionControl/InternalPostActionControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalPostActionControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPostActionControl/InternalPostActionControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { InternalConfirmDialog } from '../InternalConfirmDialog/InternalConfirmDialog';\nimport type { NotificationElement } from '@vaadin/vaadin-notification';\nimport type { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport type { ButtonElement } from '@vaadin/vaadin-button';\n\nimport { InternalControl } from '../InternalControl/InternalControl';\nimport { html, render } from 'lit-html';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { API } from '../../public/NucleonElement/API';\n\nexport class InternalPostActionControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      messageOptions: { type: Object, attribute: 'message-options' },\n      theme: {},\n      href: {},\n      __buttonState: {},\n    };\n  }\n\n  messageOptions: Record<string, string> = {};\n\n  theme: string | null = null;\n\n  href: string | null = null;\n\n  private __buttonState: 'idle' | 'busy' = 'idle';\n\n  private readonly __api = new API(this);\n\n  renderControl(): TemplateResult {\n    return html`\n      <foxy-internal-confirm-dialog\n        header=\"header\"\n        infer=\"confirm-dialog\"\n        id=\"confirm-dialog\"\n        .messageOptions=${this.messageOptions}\n        @hide=${(evt: DialogHideEvent) => {\n          if (!evt.detail.cancelled) this.__sendPost();\n        }}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <vaadin-notification\n        position=\"bottom-end\"\n        duration=\"3000\"\n        theme=\"success\"\n        id=\"success-notification\"\n        .renderer=${this.__getNotificationRenderer('success')}\n      >\n      </vaadin-notification>\n\n      <vaadin-notification\n        position=\"bottom-end\"\n        duration=\"3000\"\n        theme=\"error\"\n        id=\"error-notification\"\n        .renderer=${this.__getNotificationRenderer('error')}\n      >\n      </vaadin-notification>\n\n      <vaadin-button\n        theme=${ifDefined(this.theme ?? void 0)}\n        ?disabled=${this.disabled || this.readonly || this.__buttonState !== 'idle'}\n        @click=${(evt: CustomEvent) => {\n          const button = evt.currentTarget as ButtonElement;\n          const dialog = this.renderRoot.querySelector<InternalConfirmDialog>('#confirm-dialog');\n          dialog?.show(button);\n        }}\n      >\n        <foxy-i18n infer=\"button\" key=${this.__buttonState}></foxy-i18n>\n      </vaadin-button>\n    `;\n  }\n\n  private async __sendPost() {\n    if (this.href && this.__buttonState === 'idle') {\n      this.__buttonState = 'busy';\n\n      const response = await this.__api.fetch(this.href, { method: 'POST' });\n      const result = response.ok ? 'success' : 'error';\n      const selector = `#${result}-notification`;\n      const notification = this.renderRoot.querySelector<NotificationElement>(selector);\n\n      notification?.open();\n      this.__buttonState = 'idle';\n      this.dispatchEvent(new CustomEvent(result));\n    }\n  }\n\n  private __getNotificationRenderer(state: 'success' | 'error') {\n    return (root: HTMLElement) => {\n      if (!root.firstElementChild) root.innerHTML = '<span></span>';\n\n      const layout = html`\n        <foxy-i18n\n          style=\"color: var(--lumo-${state}-contrast-color)\"\n          lang=${this.lang}\n          key=${state}\n          ns=\"${this.ns} notification\"\n        >\n        </foxy-i18n>\n      `;\n\n      render(layout, root.firstElementChild!);\n    };\n  }\n}\n"]}
+{"version":3,"file":"InternalPostActionControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPostActionControl/InternalPostActionControl.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,8CAA2C;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,yBAA0B,SAAQ,eAAe;IAA9D;;QAUE,mBAAc,GAA2B,EAAE,CAAC;QAE5C,UAAK,GAAkB,IAAI,CAAC;QAE5B,SAAI,GAAkB,IAAI,CAAC;IA8B7B,CAAC;IA3CC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,cAAc,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE;YAC9D,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,EAAE;SACT,CAAC;IACJ,CAAC;IAQD,aAAa;;QACX,OAAO,IAAI,CAAA;;0BAEW,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC;;eAE9C,SAAS,OAAC,IAAI,CAAC,IAAI,mCAAI,KAAK,CAAC,CAAC;gBAC7B,CAAC,GAAoB,EAAE,EAAE;YAC/B,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS;gBAAE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;QAC5E,CAAC;;;;;gBAKO,SAAS,OAAC,IAAI,CAAC,KAAK,mCAAI,KAAK,CAAC,CAAC;oBAC3B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;iBACjC,CAAC,GAAgB,EAAE,EAAE;YAC5B,MAAM,MAAM,GAAG,GAAG,CAAC,aAA8B,CAAC;YAClD,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAC1C,0CAA0C,CAC3C,CAAC;YAEF,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,MAAM,EAAE;QACvB,CAAC;;;;KAIJ,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { InternalConfirmDialog } from '../InternalConfirmDialog/InternalConfirmDialog';\nimport type { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport type { ButtonElement } from '@vaadin/vaadin-button';\n\nimport { InternalControl } from '../InternalControl/InternalControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nexport class InternalPostActionControl extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      messageOptions: { type: Object, attribute: 'message-options' },\n      theme: {},\n      href: {},\n    };\n  }\n\n  messageOptions: Record<string, string> = {};\n\n  theme: string | null = null;\n\n  href: string | null = null;\n\n  renderControl(): TemplateResult {\n    return html`\n      <foxy-internal-post-action-control-dialog\n        message-options=${JSON.stringify(this.messageOptions)}\n        infer=\"\"\n        href=${ifDefined(this.href ?? void 0)}\n        @hide=${(evt: DialogHideEvent) => {\n          if (!evt.detail.cancelled) this.dispatchEvent(new CustomEvent('success'));\n        }}\n      >\n      </foxy-internal-post-action-control-dialog>\n\n      <vaadin-button\n        theme=${ifDefined(this.theme ?? void 0)}\n        ?disabled=${this.disabled || this.readonly}\n        @click=${(evt: CustomEvent) => {\n          const button = evt.currentTarget as ButtonElement;\n          const dialog = this.renderRoot.querySelector<InternalConfirmDialog>(\n            'foxy-internal-post-action-control-dialog'\n          );\n\n          dialog?.show(button);\n        }}\n      >\n        <foxy-i18n infer=\"\" key=\"button\"></foxy-i18n>\n      </vaadin-button>\n    `;\n  }\n}\n"]}

package/dist/elements/internal/InternalPostActionControl/InternalPostActionControlDialog.d.ts

@@ -0,0 +1,16 @@
+import { PropertyDeclarations, TemplateResult } from 'lit-element';
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { Dialog } from '../../private/Dialog/Dialog';
+export declare class InternalPostActionControlDialog extends Dialog {
+    static get properties(): PropertyDeclarations;
+    messageOptions: Record<string, string>;
+    closable: boolean;
+    header: string;
+    alert: boolean;
+    href: string | null;
+    private readonly __api;
+    private __state;
+    get hiddenSelector(): BooleanSelector;
+    render(): TemplateResult;
+    hide(): Promise<void>;
+}

package/dist/elements/internal/InternalPostActionControl/InternalPostActionControlDialog.js

@@ -0,0 +1,95 @@
+import { html, svg } from 'lit-element';
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { Dialog } from "../../private/Dialog/Dialog.js";
+import { API } from "../../public/NucleonElement/API.js";
+export class InternalPostActionControlDialog extends Dialog {
+    constructor() {
+        super(...arguments);
+        this.messageOptions = {};
+        this.closable = true;
+        this.header = 'header';
+        this.alert = true;
+        this.href = null;
+        this.__api = new API(this);
+        this.__state = 'idle';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            messageOptions: { type: Object, attribute: 'message-options' },
+            href: {},
+            __state: { attribute: false },
+        };
+    }
+    get hiddenSelector() {
+        const alwaysMatch = ['close-button', super.hiddenSelector.toString()];
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
+    }
+    render() {
+        return super.render(() => html `
+        <div class="relative">
+          <div class="mb-m mt-xs flex justify-center">
+            ${this.__state === 'done'
+            ? svg `<svg class="text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 2rem; height: 2rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>`
+            : this.__state === 'fail'
+                ? svg `<svg class="text-error" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 2rem; height: 2rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" /></svg>`
+                : svg `<svg class="text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 2rem; height: 2rem;"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg>`}
+          </div>
+
+          <foxy-i18n
+            class="block font-lumo text-m text-body text-center mb-l"
+            infer=""
+            key="message_${this.__state === 'busy' ? 'idle' : this.__state}"
+            .options=${this.messageOptions}
+          >
+          </foxy-i18n>
+
+          <div class="grid grid-cols-2 gap-m">
+            ${this.__state === 'done' || this.__state === 'fail'
+            ? html `
+                  <vaadin-button class="col-span-2" theme="contrast" @click=${() => this.hide()}>
+                    <foxy-i18n infer="" key="button_close"></foxy-i18n>
+                  </vaadin-button>
+                `
+            : html `
+                  <vaadin-button
+                    ?disabled=${this.disabled || this.readonly}
+                    @click=${() => this.hide()}
+                  >
+                    <foxy-i18n infer="" key="button_cancel"></foxy-i18n>
+                  </vaadin-button>
+
+                  <vaadin-button
+                    theme="primary"
+                    ?disabled=${this.disabled || this.readonly}
+                    @click=${async () => {
+                if (this.href && this.__state === 'idle') {
+                    this.__state = 'busy';
+                    this.closable = false;
+                    const response = await this.__api.fetch(this.href, { method: 'POST' });
+                    this.__state = response.ok ? 'done' : 'fail';
+                    this.closable = true;
+                }
+            }}
+                  >
+                    <foxy-i18n infer="" key="button_confirm"></foxy-i18n>
+                  </vaadin-button>
+                `}
+          </div>
+
+          ${this.__state === 'busy'
+            ? html `
+                <div class="bg-base absolute inset-0 flex items-center justify-center">
+                  <foxy-spinner layout="vertical" infer=""></foxy-spinner>
+                </div>
+              `
+            : ''}
+        </div>
+      `);
+    }
+    async hide() {
+        await super.hide(this.__state !== 'done');
+        this.__state = 'idle';
+    }
+}
+//# sourceMappingURL=InternalPostActionControlDialog.js.map

package/dist/elements/internal/InternalPostActionControl/InternalPostActionControlDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalPostActionControlDialog.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPostActionControl/InternalPostActionControlDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyDeclarations, TemplateResult, html, svg } from 'lit-element';\n\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { Dialog } from '../../private/Dialog/Dialog';\nimport { API } from '../../public/NucleonElement/API';\n\nexport class InternalPostActionControlDialog extends Dialog {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      messageOptions: { type: Object, attribute: 'message-options' },\n      href: {},\n      __state: { attribute: false },\n    };\n  }\n\n  messageOptions: Record<string, string> = {};\n\n  closable = true;\n\n  header = 'header';\n\n  alert = true;\n\n  href: string | null = null;\n\n  private readonly __api = new API(this);\n\n  private __state: 'idle' | 'busy' | 'done' | 'fail' = 'idle';\n\n  get hiddenSelector(): BooleanSelector {\n    const alwaysMatch = ['close-button', super.hiddenSelector.toString()];\n    return new BooleanSelector(alwaysMatch.join(' ').trim());\n  }\n\n  render(): TemplateResult {\n    return super.render(\n      () => html`\n        <div class=\"relative\">\n          <div class=\"mb-m mt-xs flex justify-center\">\n            ${this.__state === 'done'\n              ? svg`<svg class=\"text-success\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 2rem; height: 2rem;\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\" /></svg>`\n              : this.__state === 'fail'\n              ? svg`<svg class=\"text-error\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 2rem; height: 2rem;\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z\" /></svg>`\n              : svg`<svg class=\"text-primary\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: 2rem; height: 2rem;\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z\" /></svg>`}\n          </div>\n\n          <foxy-i18n\n            class=\"block font-lumo text-m text-body text-center mb-l\"\n            infer=\"\"\n            key=\"message_${this.__state === 'busy' ? 'idle' : this.__state}\"\n            .options=${this.messageOptions}\n          >\n          </foxy-i18n>\n\n          <div class=\"grid grid-cols-2 gap-m\">\n            ${this.__state === 'done' || this.__state === 'fail'\n              ? html`\n                  <vaadin-button class=\"col-span-2\" theme=\"contrast\" @click=${() => this.hide()}>\n                    <foxy-i18n infer=\"\" key=\"button_close\"></foxy-i18n>\n                  </vaadin-button>\n                `\n              : html`\n                  <vaadin-button\n                    ?disabled=${this.disabled || this.readonly}\n                    @click=${() => this.hide()}\n                  >\n                    <foxy-i18n infer=\"\" key=\"button_cancel\"></foxy-i18n>\n                  </vaadin-button>\n\n                  <vaadin-button\n                    theme=\"primary\"\n                    ?disabled=${this.disabled || this.readonly}\n                    @click=${async () => {\n                      if (this.href && this.__state === 'idle') {\n                        this.__state = 'busy';\n                        this.closable = false;\n                        const response = await this.__api.fetch(this.href, { method: 'POST' });\n                        this.__state = response.ok ? 'done' : 'fail';\n                        this.closable = true;\n                      }\n                    }}\n                  >\n                    <foxy-i18n infer=\"\" key=\"button_confirm\"></foxy-i18n>\n                  </vaadin-button>\n                `}\n          </div>\n\n          ${this.__state === 'busy'\n            ? html`\n                <div class=\"bg-base absolute inset-0 flex items-center justify-center\">\n                  <foxy-spinner layout=\"vertical\" infer=\"\"></foxy-spinner>\n                </div>\n              `\n            : ''}\n        </div>\n      `\n    );\n  }\n\n  async hide(): Promise<void> {\n    await super.hide(this.__state !== 'done');\n    this.__state = 'idle';\n  }\n}\n"]}

package/dist/elements/internal/InternalPostActionControl/index.d.ts

@@ -1,7 +1,6 @@
-import '@vaadin/vaadin-notification';
 import '@vaadin/vaadin-button';
-import '../InternalConfirmDialog/index';
 import '../InternalControl/index';
+import '../../public/Spinner/index';
 import '../../public/I18n/index';
 import { InternalPostActionControl } from './InternalPostActionControl';
 export { InternalPostActionControl };

package/dist/elements/internal/InternalPostActionControl/index.js

@@ -1,9 +1,10 @@
-import '@vaadin/vaadin-notification';
 import '@vaadin/vaadin-button';
-import "../InternalConfirmDialog/index.js";
 import "../InternalControl/index.js";
+import "../../public/Spinner/index.js";
 import "../../public/I18n/index.js";
+import { InternalPostActionControlDialog } from "./InternalPostActionControlDialog.js";
 import { InternalPostActionControl } from "./InternalPostActionControl.js";
 customElements.define('foxy-internal-post-action-control', InternalPostActionControl);
+customElements.define('foxy-internal-post-action-control-dialog', InternalPostActionControlDialog);
 export { InternalPostActionControl };
 //# sourceMappingURL=index.js.map

package/dist/elements/internal/InternalPostActionControl/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPostActionControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,uBAAuB,CAAC;AAE/B,2CAAwC;AACxC,qCAAkC;AAElC,oCAAiC;AAEjC,OAAO,EAAE,yBAAyB,EAAE,uCAAoC;AAExE,cAAc,CAAC,MAAM,CAAC,mCAAmC,EAAE,yBAAyB,CAAC,CAAC;AAEtF,OAAO,EAAE,yBAAyB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-notification';\nimport '@vaadin/vaadin-button';\n\nimport '../InternalConfirmDialog/index';\nimport '../InternalControl/index';\n\nimport '../../public/I18n/index';\n\nimport { InternalPostActionControl } from './InternalPostActionControl';\n\ncustomElements.define('foxy-internal-post-action-control', InternalPostActionControl);\n\nexport { InternalPostActionControl };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPostActionControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,qCAAkC;AAElC,uCAAoC;AACpC,oCAAiC;AAEjC,OAAO,EAAE,+BAA+B,EAAE,6CAA0C;AACpF,OAAO,EAAE,yBAAyB,EAAE,uCAAoC;AAExE,cAAc,CAAC,MAAM,CAAC,mCAAmC,EAAE,yBAAyB,CAAC,CAAC;AACtF,cAAc,CAAC,MAAM,CAAC,0CAA0C,EAAE,+BAA+B,CAAC,CAAC;AAEnG,OAAO,EAAE,yBAAyB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\n\nimport '../InternalControl/index';\n\nimport '../../public/Spinner/index';\nimport '../../public/I18n/index';\n\nimport { InternalPostActionControlDialog } from './InternalPostActionControlDialog';\nimport { InternalPostActionControl } from './InternalPostActionControl';\n\ncustomElements.define('foxy-internal-post-action-control', InternalPostActionControl);\ncustomElements.define('foxy-internal-post-action-control-dialog', InternalPostActionControlDialog);\n\nexport { InternalPostActionControl };\n"]}

package/dist/elements/public/ExperimentalAddToCartBuilder/ExperimentalAddToCartBuilder.js

@@ -98,7 +98,7 @@ export class ExperimentalAddToCartBuilder extends Base {
         return new BooleanSelector(alwaysMatch.join(' ').trim());
     }
     renderBody() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         const addToCartCode = this.__getAddToCartCode();
         const storeUrl = (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:store'].href) !== null && _b !== void 0 ? _b : this.store) !== null && _c !== void 0 ? _c : void 0;
         const store = (_d = this.__storeLoader) === null || _d === void 0 ? void 0 : _d.data;
@@ -125,6 +125,7 @@ export class ExperimentalAddToCartBuilder extends Base {
                   store=${ifDefined(storeUrl)}
                   index=${index}
                   infer="item"
+                  ?use-cart-validation=${ifDefined(store === null || store === void 0 ? void 0 : store.use_cart_validation)}
                   .defaultItemCategory=${this.__defaultItemCategory}
                   @remove=${() => {
                 var _a;
@@ -155,7 +156,7 @@ export class ExperimentalAddToCartBuilder extends Base {
         </foxy-internal-summary-control>
 
         <div class="space-y-m md-col-span-2 sticky top-0">
-          ${addToCartCode
+          ${addToCartCode && !addToCartCode.error
             ? html `
                 <foxy-internal-summary-control infer="preview">
                   <div class="flex">
@@ -294,8 +295,19 @@ export class ExperimentalAddToCartBuilder extends Base {
               `
             : html `
                 <foxy-internal-summary-control infer="preview">
-                  <div class="flex items-center justify-center p-xl">
-                    <foxy-spinner infer="unavailable"></foxy-spinner>
+                  <div class="flex flex-col gap-xs items-center justify-center p-xl">
+                    <foxy-spinner
+                      layout="no-label"
+                      infer="unavailable"
+                      state=${(addToCartCode === null || addToCartCode === void 0 ? void 0 : addToCartCode.error) ? 'paused' : 'busy'}
+                    >
+                    </foxy-spinner>
+                    <foxy-i18n
+                      class="text-tertiary text-s"
+                      infer="unavailable"
+                      key="${(_f = addToCartCode === null || addToCartCode === void 0 ? void 0 : addToCartCode.error) !== null && _f !== void 0 ? _f : 'loading_busy'}"
+                    >
+                    </foxy-i18n>
                   </div>
                 </foxy-internal-summary-control>
               `}
@@ -303,7 +315,7 @@ export class ExperimentalAddToCartBuilder extends Base {
           <foxy-internal-summary-control infer="cart-settings">
             <foxy-internal-resource-picker-control
               layout="summary-item"
-              first=${ifDefined((_g = (_f = this.__storeLoader) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g._links['fx:template_sets'].href)}
+              first=${ifDefined((_h = (_g = this.__storeLoader) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h._links['fx:template_sets'].href)}
               infer="template-set-uri"
               item="foxy-template-set-card"
             >
@@ -357,7 +369,7 @@ export class ExperimentalAddToCartBuilder extends Base {
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined((_h = this.localeCodes) !== null && _h !== void 0 ? _h : void 0)}
+        href=${ifDefined((_j = this.localeCodes) !== null && _j !== void 0 ? _j : void 0)}
         id="localeCodesHelperLoader"
         @update=${() => this.requestUpdate()}
       >
@@ -366,7 +378,7 @@ export class ExperimentalAddToCartBuilder extends Base {
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined((_j = this.form.template_set_uri) !== null && _j !== void 0 ? _j : void 0)}
+        href=${ifDefined((_k = this.form.template_set_uri) !== null && _k !== void 0 ? _k : void 0)}
         id="templateSetLoader"
         @update=${() => this.requestUpdate()}
       >
@@ -375,13 +387,13 @@ export class ExperimentalAddToCartBuilder extends Base {
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined((_m = (_l = (_k = this.data) === null || _k === void 0 ? void 0 : _k._links['fx:store'].href) !== null && _l !== void 0 ? _l : this.store) !== null && _m !== void 0 ? _m : void 0)}
+        href=${ifDefined((_o = (_m = (_l = this.data) === null || _l === void 0 ? void 0 : _l._links['fx:store'].href) !== null && _m !== void 0 ? _m : this.store) !== null && _o !== void 0 ? _o : void 0)}
         id="storeLoaderId"
         @update=${() => this.requestUpdate()}
       >
       </foxy-nucleon>
 
-      ${(_o = this.form.items) === null || _o === void 0 ? void 0 : _o.map((product, index) => {
+      ${(_p = this.form.items) === null || _p === void 0 ? void 0 : _p.map((product, index) => {
             var _a;
             return html `
           <foxy-nucleon
@@ -557,8 +569,12 @@ export class ExperimentalAddToCartBuilder extends Base {
             if (itemCategory && itemCategory.code !== 'DEFAULT') {
                 addHiddenInput(`${prefix}category`, itemCategory.code);
             }
-            if (product.code)
+            if (product.code) {
                 addHiddenInput(`${prefix}code`, product.code);
+            }
+            else if (store.use_cart_validation) {
+                return { error: 'code_required' };
+            }
             if (product.parent_code)
                 addHiddenInput(`${prefix}parent_code`, product.parent_code);
             if (product.image) {
@@ -756,8 +772,12 @@ export class ExperimentalAddToCartBuilder extends Base {
             }
             url.searchParams.set(`${prefix}name`, product.name);
             url.searchParams.set(`${prefix}price`, `${product.price}${currencyCode}`);
-            if (product.code)
+            if (product.code) {
                 url.searchParams.set(`${prefix}code`, product.code);
+            }
+            else if (store.use_cart_validation) {
+                return { error: 'code_required' };
+            }
             if (product.parent_code)
                 url.searchParams.set(`${prefix}parent_code`, product.parent_code);
             if (product.image) {
@@ -844,6 +864,10 @@ export class ExperimentalAddToCartBuilder extends Base {
         const linkHref = this.__getAddToCartLinkHref();
         if (!formHTML && !linkHref)
             return null;
+        if (typeof formHTML === 'object')
+            return { error: formHTML.error };
+        if (typeof linkHref === 'object')
+            return { error: linkHref.error };
         let unsignedCode;
         if (linkHref) {
             const linkHTML = `<a href="${encode(linkHref)}">Add to cart</a>`;