@foxy.io/elements 1.45.0 → 1.46.0-beta.2

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

@@ -0,0 +1,18 @@
+import type { TemplateResult } from 'lit-html';
+import type { Data } from './types';
+import { InternalForm } from '../../internal/InternalForm/InternalForm';
+declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+/**
+ * Form element for creating and editing store transaction folders (`fx:store_transaction_folder`).
+ *
+ * @element foxy-store-transaction-folder-form
+ * @since 1.46.0
+ */
+export declare class StoreTransactionFolderForm extends Base<Data> {
+    renderBody(): TemplateResult;
+    submit(): void;
+    protected _fetch<TResult = Data>(...args: Parameters<Window['fetch']>): Promise<TResult>;
+}
+export {};

package/dist/elements/public/StoreTransactionFolderForm/StoreTransactionFolderForm.js

@@ -0,0 +1,83 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { html, svg } from 'lit-html';
+const NS = 'store-transaction-folder-form';
+const Base = TranslatableMixin(InternalForm, NS);
+/**
+ * Form element for creating and editing store transaction folders (`fx:store_transaction_folder`).
+ *
+ * @element foxy-store-transaction-folder-form
+ * @since 1.46.0
+ */
+export class StoreTransactionFolderForm extends Base {
+    renderBody() {
+        var _a;
+        const colors = {
+            'red': 'bg-folder-red text-white',
+            'red_pale': 'bg-folder-red-pale text-black',
+            'green': 'bg-folder-green text-white',
+            'green_pale': 'bg-folder-green-pale text-black',
+            'blue': 'bg-folder-blue text-white',
+            'blue_pale': 'bg-folder-blue-pale text-black',
+            'orange': 'bg-folder-orange text-white',
+            'orange_pale': 'bg-folder-orange-pale text-black',
+            'violet': 'bg-folder-violet text-white',
+            'violet_pale': 'bg-folder-violet-pale text-black',
+            '': 'bg-contrast-5 text-body',
+        };
+        const currentColor = this.form.color && this.form.color in colors ? this.form.color : '';
+        return html `
+      <foxy-internal-summary-control infer="" label="" helper-text="">
+        <div class="flex flex-col items-center justify-center gap-m bg-transparent">
+          <div class="flex items-center p-m rounded-full ${colors[currentColor]}">
+            ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="width: 2em; height: 2em;"><path d="M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" /></svg>`}
+          </div>
+
+          <p class="text-xl font-medium">
+            ${((_a = this.form.name) === null || _a === void 0 ? void 0 : _a.trim()) || this.t('group-one.name.placeholder')}
+          </p>
+        </div>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="group-one">
+        <foxy-internal-text-control layout="summary-item" infer="name"></foxy-internal-text-control>
+        <foxy-internal-store-transaction-folder-color-control infer="color" .colors=${colors}>
+        </foxy-internal-store-transaction-folder-color-control>
+      </foxy-internal-summary-control>
+
+      <foxy-internal-summary-control infer="group-two">
+        <foxy-internal-switch-control infer="is-default" .trueAlias=${1} .falseAlias=${0}>
+        </foxy-internal-switch-control>
+      </foxy-internal-summary-control>
+
+      ${super.renderBody()}
+    `;
+    }
+    submit() {
+        var _a;
+        if (!((_a = this.form.name) === null || _a === void 0 ? void 0 : _a.trim()))
+            this.edit({ name: this.t('group-one.name.placeholder') });
+        super.submit();
+    }
+    async _fetch(...args) {
+        try {
+            return await super._fetch(...args);
+        }
+        catch (err) {
+            let message;
+            try {
+                message = (await err.json())._embedded['fx:errors'][0].message;
+            }
+            catch (_a) {
+                throw err;
+            }
+            if (message.includes('it has transactions in it')) {
+                throw ['error:folder_not_empty'];
+            }
+            else {
+                throw err;
+            }
+        }
+    }
+}
+//# sourceMappingURL=StoreTransactionFolderForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StoreTransactionFolderForm.js","sourceRoot":"","sources":["../../../../src/elements/public/StoreTransactionFolderForm/StoreTransactionFolderForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAErC,MAAM,EAAE,GAAG,+BAA+B,CAAC;AAC3C,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,OAAO,0BAA2B,SAAQ,IAAU;IACxD,UAAU;;QACR,MAAM,MAAM,GAA2B;YACrC,KAAK,EAAE,0BAA0B;YACjC,UAAU,EAAE,+BAA+B;YAC3C,OAAO,EAAE,4BAA4B;YACrC,YAAY,EAAE,iCAAiC;YAC/C,MAAM,EAAE,2BAA2B;YACnC,WAAW,EAAE,gCAAgC;YAC7C,QAAQ,EAAE,6BAA6B;YACvC,aAAa,EAAE,kCAAkC;YACjD,QAAQ,EAAE,6BAA6B;YACvC,aAAa,EAAE,kCAAkC;YACjD,EAAE,EAAE,yBAAyB;SAC9B,CAAC;QAEF,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAEzF,OAAO,IAAI,CAAA;;;2DAG4C,MAAM,CAAC,YAAY,CAAC;cACjE,GAAG,CAAA,kYAAkY;;;;cAIrY,OAAA,IAAI,CAAC,IAAI,CAAC,IAAI,0CAAE,IAAI,OAAM,IAAI,CAAC,CAAC,CAAC,4BAA4B,CAAC;;;;;;;sFAOU,MAAM;;;;;sEAKtB,CAAC,gBAAgB,CAAC;;;;QAIhF,KAAK,CAAC,UAAU,EAAE;KACrB,CAAC;IACJ,CAAC;IAED,MAAM;;QACJ,IAAI,QAAC,IAAI,CAAC,IAAI,CAAC,IAAI,0CAAE,IAAI,GAAE;YAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,4BAA4B,CAAC,EAAE,CAAC,CAAC;QACvF,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC;IAES,KAAK,CAAC,MAAM,CAAiB,GAAG,IAAiC;QACzE,IAAI;YACF,OAAO,MAAM,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;SACpC;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,OAAO,CAAC;YAEZ,IAAI;gBACF,OAAO,GAAG,CAAC,MAAO,GAAgB,CAAC,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;aAC9E;YAAC,WAAM;gBACN,MAAM,GAAG,CAAC;aACX;YAED,IAAI,OAAO,CAAC,QAAQ,CAAC,2BAA2B,CAAC,EAAE;gBACjD,MAAM,CAAC,wBAAwB,CAAC,CAAC;aAClC;iBAAM;gBACL,MAAM,GAAG,CAAC;aACX;SACF;IACH,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { html, svg } from 'lit-html';\n\nconst NS = 'store-transaction-folder-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Form element for creating and editing store transaction folders (`fx:store_transaction_folder`).\n *\n * @element foxy-store-transaction-folder-form\n * @since 1.46.0\n */\nexport class StoreTransactionFolderForm extends Base<Data> {\n  renderBody(): TemplateResult {\n    const colors: Record<string, string> = {\n      'red': 'bg-folder-red text-white',\n      'red_pale': 'bg-folder-red-pale text-black',\n      'green': 'bg-folder-green text-white',\n      'green_pale': 'bg-folder-green-pale text-black',\n      'blue': 'bg-folder-blue text-white',\n      'blue_pale': 'bg-folder-blue-pale text-black',\n      'orange': 'bg-folder-orange text-white',\n      'orange_pale': 'bg-folder-orange-pale text-black',\n      'violet': 'bg-folder-violet text-white',\n      'violet_pale': 'bg-folder-violet-pale text-black',\n      '': 'bg-contrast-5 text-body',\n    };\n\n    const currentColor = this.form.color && this.form.color in colors ? this.form.color : '';\n\n    return html`\n      <foxy-internal-summary-control infer=\"\" label=\"\" helper-text=\"\">\n        <div class=\"flex flex-col items-center justify-center gap-m bg-transparent\">\n          <div class=\"flex items-center p-m rounded-full ${colors[currentColor]}\">\n            ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style=\"width: 2em; height: 2em;\"><path d=\"M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z\" /></svg>`}\n          </div>\n\n          <p class=\"text-xl font-medium\">\n            ${this.form.name?.trim() || this.t('group-one.name.placeholder')}\n          </p>\n        </div>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-summary-control infer=\"group-one\">\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"name\"></foxy-internal-text-control>\n        <foxy-internal-store-transaction-folder-color-control infer=\"color\" .colors=${colors}>\n        </foxy-internal-store-transaction-folder-color-control>\n      </foxy-internal-summary-control>\n\n      <foxy-internal-summary-control infer=\"group-two\">\n        <foxy-internal-switch-control infer=\"is-default\" .trueAlias=${1} .falseAlias=${0}>\n        </foxy-internal-switch-control>\n      </foxy-internal-summary-control>\n\n      ${super.renderBody()}\n    `;\n  }\n\n  submit(): void {\n    if (!this.form.name?.trim()) this.edit({ name: this.t('group-one.name.placeholder') });\n    super.submit();\n  }\n\n  protected async _fetch<TResult = Data>(...args: Parameters<Window['fetch']>): Promise<TResult> {\n    try {\n      return await super._fetch(...args);\n    } catch (err) {\n      let message;\n\n      try {\n        message = (await (err as Response).json())._embedded['fx:errors'][0].message;\n      } catch {\n        throw err;\n      }\n\n      if (message.includes('it has transactions in it')) {\n        throw ['error:folder_not_empty'];\n      } else {\n        throw err;\n      }\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,7 @@
+import '../../internal/InternalSummaryControl/index';
+import '../../internal/InternalSwitchControl/index';
+import '../../internal/InternalTextControl/index';
+import '../../internal/InternalForm/index';
+import './internal/InternalStoreTransactionFolderFormColorControl/index';
+import { StoreTransactionFolderForm } from './StoreTransactionFolderForm';
+export { StoreTransactionFolderForm };

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

@@ -0,0 +1,9 @@
+import "../../internal/InternalSummaryControl/index.js";
+import "../../internal/InternalSwitchControl/index.js";
+import "../../internal/InternalTextControl/index.js";
+import "../../internal/InternalForm/index.js";
+import "./internal/InternalStoreTransactionFolderFormColorControl/index.js";
+import { StoreTransactionFolderForm } from "./StoreTransactionFolderForm.js";
+customElements.define('foxy-store-transaction-folder-form', StoreTransactionFolderForm);
+export { StoreTransactionFolderForm };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/StoreTransactionFolderForm/index.ts"],"names":[],"mappings":"AAAA,wDAAqD;AACrD,uDAAoD;AACpD,qDAAkD;AAClD,8CAA2C;AAE3C,4EAAyE;AAEzE,OAAO,EAAE,0BAA0B,EAAE,wCAAqC;AAE1E,cAAc,CAAC,MAAM,CAAC,oCAAoC,EAAE,0BAA0B,CAAC,CAAC;AAExF,OAAO,EAAE,0BAA0B,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSummaryControl/index';\nimport '../../internal/InternalSwitchControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalForm/index';\n\nimport './internal/InternalStoreTransactionFolderFormColorControl/index';\n\nimport { StoreTransactionFolderForm } from './StoreTransactionFolderForm';\n\ncustomElements.define('foxy-store-transaction-folder-form', StoreTransactionFolderForm);\n\nexport { StoreTransactionFolderForm };\n"]}

package/dist/elements/public/StoreTransactionFolderForm/internal/InternalStoreTransactionFolderFormColorControl/InternalStoreTransactionFolderFormColorControl.d.ts

@@ -0,0 +1,8 @@
+import type { PropertyDeclarations } from 'lit-element';
+import type { TemplateResult } from 'lit-html';
+import { InternalEditableControl } from '../../../../internal/InternalEditableControl/InternalEditableControl';
+export declare class InternalStoreTransactionFolderFormColorControl extends InternalEditableControl {
+    static get properties(): PropertyDeclarations;
+    colors: Record<string, string>;
+    renderControl(): TemplateResult;
+}

package/dist/elements/public/StoreTransactionFolderForm/internal/InternalStoreTransactionFolderFormColorControl/InternalStoreTransactionFolderFormColorControl.js

@@ -0,0 +1,74 @@
+import { InternalEditableControl } from "../../../../internal/InternalEditableControl/InternalEditableControl.js";
+import { classMap } from "../../../../../utils/class-map.js";
+import { html } from 'lit-html';
+export class InternalStoreTransactionFolderFormColorControl extends InternalEditableControl {
+    constructor() {
+        super(...arguments);
+        this.colors = {};
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            colors: { type: Object },
+        };
+    }
+    renderControl() {
+        const currentValue = this._value in this.colors ? this._value : '';
+        return html `
+      <div class="flex gap-s">
+        <div class="mr-auto">${this.label}</div>
+        <div class="flex flex-wrap justify-end items-center gap-s">
+          ${Object.entries(this.colors).map(([colorName, className]) => {
+            const isSelected = colorName === currentValue;
+            return html `
+              <div
+                class=${classMap({
+                'relative p-s -m-s rounded-s flex-shrink-0': true,
+                'group transform transition-transform': true,
+                'focus-within-ring-2 focus-within-ring-primary-50': true,
+                'cursor-pointer hover-scale-150': !isSelected && !this.disabled && !this.readonly,
+            })}
+              >
+                <div
+                  style="width: 1em; height: 1em; padding: 2px;"
+                  class=${classMap({
+                'relative rounded-full transition-all': true,
+                'ring-1 ring-contrast-10': !isSelected,
+                'ring-2 ring-contrast-80': isSelected && !this.disabled,
+                'ring-2 ring-contrast-10': isSelected && this.disabled,
+            })}
+                >
+                  <div
+                    class=${classMap({
+                'w-full h-full rounded-full transition-opacity': true,
+                'opacity-25': this.disabled,
+                [className]: true,
+            })}
+                  ></div>
+                </div>
+                ${this.readonly
+                ? ''
+                : html `
+                      <input
+                        aria-label=${this.t(`color_${colorName || 'none'}`)}
+                        class=${classMap({
+                    'absolute inset-0 block w-full h-full opacity-0': true,
+                    'cursor-pointer': !isSelected && !this.disabled && !this.readonly,
+                })}
+                        value=${colorName}
+                        name="color"
+                        type="radio"
+                        ?disabled=${this.disabled}
+                        ?checked=${isSelected}
+                        @change=${() => (this._value = colorName)}
+                      />
+                    `}
+              </div>
+            `;
+        })}
+        </div>
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=InternalStoreTransactionFolderFormColorControl.js.map

package/dist/elements/public/StoreTransactionFolderForm/internal/InternalStoreTransactionFolderFormColorControl/InternalStoreTransactionFolderFormColorControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalStoreTransactionFolderFormColorControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/StoreTransactionFolderForm/internal/InternalStoreTransactionFolderFormColorControl/InternalStoreTransactionFolderFormColorControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,gFAA6E;AAC/G,OAAO,EAAE,QAAQ,EAAE,0CAAuC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,8CAA+C,SAAQ,uBAAuB;IAA3F;;QAQE,WAAM,GAA2B,EAAE,CAAC;IA8DtC,CAAC;IArEC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACzB,CAAC;IACJ,CAAC;IAID,aAAa;QACX,MAAM,YAAY,GAAI,IAAI,CAAC,MAAiB,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAE,IAAI,CAAC,MAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;QAE3F,OAAO,IAAI,CAAA;;+BAEgB,IAAI,CAAC,KAAK;;YAE7B,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,EAAE;YAC3D,MAAM,UAAU,GAAG,SAAS,KAAK,YAAY,CAAC;YAE9C,OAAO,IAAI,CAAA;;wBAEC,QAAQ,CAAC;gBACf,2CAA2C,EAAE,IAAI;gBACjD,sCAAsC,EAAE,IAAI;gBAC5C,kDAAkD,EAAE,IAAI;gBACxD,gCAAgC,EAAE,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;aAClF,CAAC;;;;0BAIQ,QAAQ,CAAC;gBACf,sCAAsC,EAAE,IAAI;gBAC5C,yBAAyB,EAAE,CAAC,UAAU;gBACtC,yBAAyB,EAAE,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACvD,yBAAyB,EAAE,UAAU,IAAI,IAAI,CAAC,QAAQ;aACvD,CAAC;;;4BAGQ,QAAQ,CAAC;gBACf,+CAA+C,EAAE,IAAI;gBACrD,YAAY,EAAE,IAAI,CAAC,QAAQ;gBAC3B,CAAC,SAAS,CAAC,EAAE,IAAI;aAClB,CAAC;;;kBAGJ,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,IAAI,CAAA;;qCAEa,IAAI,CAAC,CAAC,CAAC,SAAS,SAAS,IAAI,MAAM,EAAE,CAAC;gCAC3C,QAAQ,CAAC;oBACf,gDAAgD,EAAE,IAAI;oBACtD,gBAAgB,EAAE,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;iBAClE,CAAC;gCACM,SAAS;;;oCAGL,IAAI,CAAC,QAAQ;mCACd,UAAU;kCACX,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;;qBAE5C;;aAER,CAAC;QACJ,CAAC,CAAC;;;KAGP,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\n\nimport { InternalEditableControl } from '../../../../internal/InternalEditableControl/InternalEditableControl';\nimport { classMap } from '../../../../../utils/class-map';\nimport { html } from 'lit-html';\n\nexport class InternalStoreTransactionFolderFormColorControl extends InternalEditableControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      colors: { type: Object },\n    };\n  }\n\n  colors: Record<string, string> = {};\n\n  renderControl(): TemplateResult {\n    const currentValue = (this._value as string) in this.colors ? (this._value as string) : '';\n\n    return html`\n      <div class=\"flex gap-s\">\n        <div class=\"mr-auto\">${this.label}</div>\n        <div class=\"flex flex-wrap justify-end items-center gap-s\">\n          ${Object.entries(this.colors).map(([colorName, className]) => {\n            const isSelected = colorName === currentValue;\n\n            return html`\n              <div\n                class=${classMap({\n                  'relative p-s -m-s rounded-s flex-shrink-0': true,\n                  'group transform transition-transform': true,\n                  'focus-within-ring-2 focus-within-ring-primary-50': true,\n                  'cursor-pointer hover-scale-150': !isSelected && !this.disabled && !this.readonly,\n                })}\n              >\n                <div\n                  style=\"width: 1em; height: 1em; padding: 2px;\"\n                  class=${classMap({\n                    'relative rounded-full transition-all': true,\n                    'ring-1 ring-contrast-10': !isSelected,\n                    'ring-2 ring-contrast-80': isSelected && !this.disabled,\n                    'ring-2 ring-contrast-10': isSelected && this.disabled,\n                  })}\n                >\n                  <div\n                    class=${classMap({\n                      'w-full h-full rounded-full transition-opacity': true,\n                      'opacity-25': this.disabled,\n                      [className]: true,\n                    })}\n                  ></div>\n                </div>\n                ${this.readonly\n                  ? ''\n                  : html`\n                      <input\n                        aria-label=${this.t(`color_${colorName || 'none'}`)}\n                        class=${classMap({\n                          'absolute inset-0 block w-full h-full opacity-0': true,\n                          'cursor-pointer': !isSelected && !this.disabled && !this.readonly,\n                        })}\n                        value=${colorName}\n                        name=\"color\"\n                        type=\"radio\"\n                        ?disabled=${this.disabled}\n                        ?checked=${isSelected}\n                        @change=${() => (this._value = colorName)}\n                      />\n                    `}\n              </div>\n            `;\n          })}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/public/StoreTransactionFolderForm/internal/InternalStoreTransactionFolderFormColorControl/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../internal/InternalEditableControl/index';
+import { InternalStoreTransactionFolderFormColorControl } from './InternalStoreTransactionFolderFormColorControl';
+export { InternalStoreTransactionFolderFormColorControl };

package/dist/elements/public/StoreTransactionFolderForm/internal/InternalStoreTransactionFolderFormColorControl/index.js

@@ -0,0 +1,5 @@
+import "../../../../internal/InternalEditableControl/index.js";
+import { InternalStoreTransactionFolderFormColorControl } from "./InternalStoreTransactionFolderFormColorControl.js";
+customElements.define('foxy-internal-store-transaction-folder-color-control', InternalStoreTransactionFolderFormColorControl);
+export { InternalStoreTransactionFolderFormColorControl };
+//# sourceMappingURL=index.js.map

package/dist/elements/public/StoreTransactionFolderForm/internal/InternalStoreTransactionFolderFormColorControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/public/StoreTransactionFolderForm/internal/InternalStoreTransactionFolderFormColorControl/index.ts"],"names":[],"mappings":"AAAA,+DAA4D;AAE5D,OAAO,EAAE,8CAA8C,EAAE,4DAAyD;AAElH,cAAc,CAAC,MAAM,CACnB,sDAAsD,EACtD,8CAA8C,CAC/C,CAAC;AAEF,OAAO,EAAE,8CAA8C,EAAE,CAAC","sourcesContent":["import '../../../../internal/InternalEditableControl/index';\n\nimport { InternalStoreTransactionFolderFormColorControl } from './InternalStoreTransactionFolderFormColorControl';\n\ncustomElements.define(\n  'foxy-internal-store-transaction-folder-color-control',\n  InternalStoreTransactionFolderFormColorControl\n);\n\nexport { InternalStoreTransactionFolderFormColorControl };\n"]}

package/dist/elements/public/StoreTransactionFolderForm/types.d.ts

@@ -0,0 +1,3 @@
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
+export declare type Data = Resource<Rels.StoreTransactionFolder>;

package/dist/elements/public/StoreTransactionFolderForm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/elements/public/StoreTransactionFolderForm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/StoreTransactionFolderForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nexport type Data = Resource<Rels.StoreTransactionFolder>;\n"]}

package/dist/elements/public/SubscriptionCard/SubscriptionCard.js

@@ -91,9 +91,7 @@ export class SubscriptionCard extends Base {
               </div>
             </div>
 
-            <div
-              class="flex-1 leading-xs mb-xs sm-mb-0 sm-text-right order-0 sm-order-1"
-            >
+            <div class="flex-1 leading-xs mb-xs sm-mb-0 sm-text-right order-0 sm-order-1">
               <foxy-i18n
                 data-testid="price"
                 options=${JSON.stringify(this.__getPriceOptions())}
@@ -104,13 +102,28 @@ export class SubscriptionCard extends Base {
                 ns=${this.ns}
               >
               </foxy-i18n>
+
               <span class="text-secondary font-medium sm-font-normal sm-block text-xxs sm-text-s">
-                <span class="sm-hidden">(</span><span class="hidden sm-inline">*</span><foxy-i18n infer="" key="fees_hint"></foxy-i18n><span class="sm-hidden">)</span>
+                <span class="sm-hidden">(</span>
+                <span class="hidden sm-inline">*</span>
+                <foxy-i18n infer="" key="fees_hint"></foxy-i18n>
+                <span class="sm-hidden">)</span>
                 <iron-icon id="hint" icon="icons:info-outline" class="icon-inline"></iron-icon>
-                <vcf-tooltip for="hint" position="bottom">
-                  <span class="text-s"><foxy-i18n infer="" key="fees_explainer"></foxy-i18n></span>
+                <vcf-tooltip
+                  position="bottom"
+                  style="--lumo-base-color: black"
+                  theme="light"
+                  for="hint"
+                >
+                  <foxy-i18n
+                    infer=""
+                    class="text-s whitespace-nowrap"
+                    style="color: white"
+                    key="fees_explainer"
+                  >
+                  </foxy-i18n>
                 </vcf-tooltip>
-              <span>
+              </span>
               &#8203;
             </div>
           </div>

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

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionCard/SubscriptionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { Data, Settings } from './types';\n\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { parseFrequency } from '../../../utils/parse-frequency';\n\nimport {\n  getExtendedSubscriptionStatus,\n  getSubscriptionStatus,\n} from '../../../utils/get-subscription-status';\n\nconst NS = 'subscription-card';\nconst Base = ConfigurableMixin(\n  ResponsiveMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Card element displaying subscription summary.\n *\n * @element foxy-subscription-card\n * @since 1.4.0\n */\nexport class SubscriptionCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      settings: { type: Object },\n    };\n  }\n\n  settings: Settings | null = null;\n\n  render(): TemplateResult {\n    const status = this.settings\n      ? getExtendedSubscriptionStatus(this.data, this.settings)\n      : getSubscriptionStatus(this.data);\n\n    const isRed = status === 'failed';\n    const isGreen = status?.startsWith('next_payment') || !!status?.startsWith('will_end');\n    const isNormal = !isGreen && !isRed;\n\n    return html`\n      <div class=\"relative text-left\">\n        <div\n          class=${classMap({\n            'flex items-start sm-items-center space-x-m transition duration-150 ease-in-out': true,\n            'opacity-0': !this.in({ idle: 'snapshot' }),\n          })}\n        >\n          <div\n            class=${classMap({\n              'min-w-0 flex-shrink-0 rounded-full relative flex p-s': true,\n              'text-success bg-success-10': isGreen,\n              'text-body bg-contrast-5': isNormal,\n              'text-error bg-error-10': isRed,\n            })}\n          >\n            <iron-icon\n              class=\"m-auto\"\n              icon=${isRed ? 'error-outline' : isGreen ? 'done' : 'done-all'}\n            >\n            </iron-icon>\n          </div>\n\n          <div class=\"flex-1 min-w-0 leading-xs flex flex-col sm-flex-row sm-items-center\">\n            <div class=\"order-1 sm-order-0\">\n              <div class=\"text-body font-medium origin-top-left text-m\">\n                <foxy-i18n\n                  data-testid=\"summary\"\n                  options=${JSON.stringify(this.__getSummaryOptions())}\n                  lang=${this.lang}\n                  key=\"transaction_summary\"\n                  ns=${this.ns}\n                >\n                </foxy-i18n>\n                &#8203;\n              </div>\n\n              <div\n                class=${classMap({\n                  'text-m': true,\n                  'text-tertiary': isNormal,\n                  'text-success': isGreen,\n                  'text-error': isRed,\n                })}\n              >\n                <foxy-i18n\n                  data-testid=\"status\"\n                  lang=${this.lang}\n                  key=\"status_${status}\"\n                  ns=${this.ns}\n                  .options=${this.data}\n                >\n                </foxy-i18n>\n                &#8203;\n              </div>\n            </div>\n\n            <div\n              class=\"flex-1 leading-xs mb-xs sm-mb-0 sm-text-right order-0 sm-order-1\"\n            >\n              <foxy-i18n\n                data-testid=\"price\"\n                options=${JSON.stringify(this.__getPriceOptions())}\n                class=\"text-xxs sm-text-l font-tnum tracking-wide sm-tracking-normal uppercase sm-normal-case font-medium text-secondary sm-text-body sm-block\"\n                lang=${this.lang}\n                key=\"price${\n                  this.settings?.cart_display_config.show_sub_frequency ?? true\n                    ? `_${this.data?.frequency === '.5m' ? 'twice_a_month' : 'recurring'}`\n                    : ''\n                }\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n              <span class=\"text-secondary font-medium sm-font-normal sm-block text-xxs sm-text-s\">\n                <span class=\"sm-hidden\">(</span><span class=\"hidden sm-inline\">*</span><foxy-i18n infer=\"\" key=\"fees_hint\"></foxy-i18n><span class=\"sm-hidden\">)</span>\n                <iron-icon id=\"hint\" icon=\"icons:info-outline\" class=\"icon-inline\"></iron-icon>\n                <vcf-tooltip for=\"hint\" position=\"bottom\">\n                  <span class=\"text-s\"><foxy-i18n infer=\"\" key=\"fees_explainer\"></foxy-i18n></span>\n                </vcf-tooltip>\n              <span>\n              &#8203;\n            </div>\n          </div>\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition ease-in-out duration-150': true,\n            'opacity-0': this.in({ idle: 'snapshot' }),\n          })}\n        >\n          <foxy-spinner\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            class=\"m-auto\"\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n\n      ${this.renderTemplateOrSlot()}\n    `;\n  }\n\n  private __getSummaryOptions() {\n    if (this.data === null) return {};\n    const items = this.data._embedded['fx:transaction_template']._embedded['fx:items'];\n\n    return {\n      count_minus_one: items.length - 1,\n      first_item: items[0],\n      count: items.length,\n    };\n  }\n\n  private __getPriceOptions() {\n    if (this.data === null) return {};\n\n    const cart = this.data._embedded['fx:transaction_template'];\n    const amount = `${cart.total_order} ${cart.currency_code}`;\n    return { ...parseFrequency(this.data.frequency), amount };\n  }\n}\n"]}
+{"version":3,"file":"SubscriptionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionCard/SubscriptionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { Data, Settings } from './types';\n\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { parseFrequency } from '../../../utils/parse-frequency';\n\nimport {\n  getExtendedSubscriptionStatus,\n  getSubscriptionStatus,\n} from '../../../utils/get-subscription-status';\n\nconst NS = 'subscription-card';\nconst Base = ConfigurableMixin(\n  ResponsiveMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Card element displaying subscription summary.\n *\n * @element foxy-subscription-card\n * @since 1.4.0\n */\nexport class SubscriptionCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      settings: { type: Object },\n    };\n  }\n\n  settings: Settings | null = null;\n\n  render(): TemplateResult {\n    const status = this.settings\n      ? getExtendedSubscriptionStatus(this.data, this.settings)\n      : getSubscriptionStatus(this.data);\n\n    const isRed = status === 'failed';\n    const isGreen = status?.startsWith('next_payment') || !!status?.startsWith('will_end');\n    const isNormal = !isGreen && !isRed;\n\n    return html`\n      <div class=\"relative text-left\">\n        <div\n          class=${classMap({\n            'flex items-start sm-items-center space-x-m transition duration-150 ease-in-out': true,\n            'opacity-0': !this.in({ idle: 'snapshot' }),\n          })}\n        >\n          <div\n            class=${classMap({\n              'min-w-0 flex-shrink-0 rounded-full relative flex p-s': true,\n              'text-success bg-success-10': isGreen,\n              'text-body bg-contrast-5': isNormal,\n              'text-error bg-error-10': isRed,\n            })}\n          >\n            <iron-icon\n              class=\"m-auto\"\n              icon=${isRed ? 'error-outline' : isGreen ? 'done' : 'done-all'}\n            >\n            </iron-icon>\n          </div>\n\n          <div class=\"flex-1 min-w-0 leading-xs flex flex-col sm-flex-row sm-items-center\">\n            <div class=\"order-1 sm-order-0\">\n              <div class=\"text-body font-medium origin-top-left text-m\">\n                <foxy-i18n\n                  data-testid=\"summary\"\n                  options=${JSON.stringify(this.__getSummaryOptions())}\n                  lang=${this.lang}\n                  key=\"transaction_summary\"\n                  ns=${this.ns}\n                >\n                </foxy-i18n>\n                &#8203;\n              </div>\n\n              <div\n                class=${classMap({\n                  'text-m': true,\n                  'text-tertiary': isNormal,\n                  'text-success': isGreen,\n                  'text-error': isRed,\n                })}\n              >\n                <foxy-i18n\n                  data-testid=\"status\"\n                  lang=${this.lang}\n                  key=\"status_${status}\"\n                  ns=${this.ns}\n                  .options=${this.data}\n                >\n                </foxy-i18n>\n                &#8203;\n              </div>\n            </div>\n\n            <div class=\"flex-1 leading-xs mb-xs sm-mb-0 sm-text-right order-0 sm-order-1\">\n              <foxy-i18n\n                data-testid=\"price\"\n                options=${JSON.stringify(this.__getPriceOptions())}\n                class=\"text-xxs sm-text-l font-tnum tracking-wide sm-tracking-normal uppercase sm-normal-case font-medium text-secondary sm-text-body sm-block\"\n                lang=${this.lang}\n                key=\"price${this.settings?.cart_display_config.show_sub_frequency ?? true\n                  ? `_${this.data?.frequency === '.5m' ? 'twice_a_month' : 'recurring'}`\n                  : ''}\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n\n              <span class=\"text-secondary font-medium sm-font-normal sm-block text-xxs sm-text-s\">\n                <span class=\"sm-hidden\">(</span>\n                <span class=\"hidden sm-inline\">*</span>\n                <foxy-i18n infer=\"\" key=\"fees_hint\"></foxy-i18n>\n                <span class=\"sm-hidden\">)</span>\n                <iron-icon id=\"hint\" icon=\"icons:info-outline\" class=\"icon-inline\"></iron-icon>\n                <vcf-tooltip\n                  position=\"bottom\"\n                  style=\"--lumo-base-color: black\"\n                  theme=\"light\"\n                  for=\"hint\"\n                >\n                  <foxy-i18n\n                    infer=\"\"\n                    class=\"text-s whitespace-nowrap\"\n                    style=\"color: white\"\n                    key=\"fees_explainer\"\n                  >\n                  </foxy-i18n>\n                </vcf-tooltip>\n              </span>\n              &#8203;\n            </div>\n          </div>\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition ease-in-out duration-150': true,\n            'opacity-0': this.in({ idle: 'snapshot' }),\n          })}\n        >\n          <foxy-spinner\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            class=\"m-auto\"\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n\n      ${this.renderTemplateOrSlot()}\n    `;\n  }\n\n  private __getSummaryOptions() {\n    if (this.data === null) return {};\n    const items = this.data._embedded['fx:transaction_template']._embedded['fx:items'];\n\n    return {\n      count_minus_one: items.length - 1,\n      first_item: items[0],\n      count: items.length,\n    };\n  }\n\n  private __getPriceOptions() {\n    if (this.data === null) return {};\n\n    const cart = this.data._embedded['fx:transaction_template'];\n    const amount = `${cart.total_order} ${cart.currency_code}`;\n    return { ...parseFrequency(this.data.frequency), amount };\n  }\n}\n"]}

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

@@ -20,7 +20,6 @@ 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

@@ -31,11 +31,16 @@ export class SwipeActions extends LitElement {
 }
 
 #scroll{
-  margin-bottom:calc(0px - var(--scrollbar-height, 24px));
   overflow:scroll hidden;
   white-space:nowrap;
   scroll-snap-type:x mandatory;
   display:flex;
+  scrollbar-width:none;
+  -ms-overflow-style:none;
+}
+
+#scroll::-webkit-scrollbar{
+  display:none;
 }
 
 #content{
@@ -80,12 +85,6 @@ 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

@@ -1 +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"]}
+{"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;;QAgDU,YAAO,GAA4D,MAAM,CAAC;QAE1E,oBAAe,GAA0B,IAAI,CAAC;IAyExD,CAAC;IA1HC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAC9B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCT,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        overflow: scroll hidden;\n        white-space: nowrap;\n        scroll-snap-type: x mandatory;\n        display: flex;\n        scrollbar-width: none; /* Firefox */\n        -ms-overflow-style: none; /* Internet Explorer 10+ */\n      }\n\n      #scroll::-webkit-scrollbar {\n        display: none; /* Chrome, Safari, Opera */\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"]}

package/dist/elements/public/TaxCard/TaxCard.js

@@ -71,7 +71,7 @@ export class TaxCard extends TranslatableMixin(InternalCard, 'tax-card') {
             return `${country}, ${region}`;
         if (type === 'local')
             return `${country}, ${region}, ${city}`;
-        if (type === 'custom_tax')
+        if (type === 'custom_tax_endpoint')
             return this.t('tax_custom_tax');
     }
     __getRateLabel({ is_live, rate }) {
@@ -85,7 +85,7 @@ export class TaxCard extends TranslatableMixin(InternalCard, 'tax-card') {
             return 'Avalara AvaTax 15';
         if (provider === 'taxjar')
             return 'TaxJar';
-        if (provider === 'custom_tax_endpoint')
+        if (provider === 'custom_tax')
             return this.t('tax_rate_provider_custom');
         return this.t('tax_rate_provider_default');
     }

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

@@ -1 +1 @@
-{"version":3,"file":"TaxCard.js","sourceRoot":"","sources":["../../../../src/elements/public/TaxCard/TaxCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\n/**\n * Basic card displaying a tax.\n *\n * @element foxy-tax-card\n * @since 1.13.0\n */\nexport class TaxCard extends TranslatableMixin(InternalCard, 'tax-card')<Data> {\n  renderBody(): TemplateResult {\n    let taxItemCategoriesHref: string | undefined;\n\n    try {\n      const url = new URL(this.data?._links['fx:tax_item_categories'].href ?? '');\n      url.searchParams.set('limit', '1');\n      taxItemCategoriesHref = url.toString();\n    } catch {\n      taxItemCategoriesHref = undefined;\n    }\n\n    const taxItemCategories = this.__taxItemCategoriesLoader?.data;\n\n    return html`\n      <div class=\"leading-xs\">\n        <p class=\"flex items-center gap-m\" data-testid=\"title\">\n          <span class=\"font-medium flex-1\">${this.data?.name}&ZeroWidthSpace;</span>\n          ${taxItemCategories\n            ? html`\n                <foxy-i18n\n                  options=${JSON.stringify({\n                    context: taxItemCategories.total_items > 0 ? '' : 'empty',\n                    count: taxItemCategories.total_items,\n                  })}\n                  class=\"text-xs text-tertiary\"\n                  infer=\"\"\n                  key=\"tax_item_categories\"\n                >\n                </foxy-i18n>\n              `\n            : ''}\n        </p>\n\n        <p class=\"text-s text-secondary\" data-testid=\"subtitle\">\n          ${this.data ? this.__getTypeLabel(this.data) : ''} &bull;\n          ${this.data ? this.__getRateLabel(this.data) : ''}\n        </p>\n      </div>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(taxItemCategoriesHref)}\n        id=\"taxItemCategoriesLoader\"\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n    `;\n  }\n\n  private get __taxItemCategoriesLoader() {\n    type Loader = NucleonElement<Resource<Rels.TaxItemCategories>>;\n    return this.renderRoot.querySelector<Loader>('#taxItemCategoriesLoader');\n  }\n\n  private __getTypeLabel({ type, country, region, city }: Data) {\n    if (type === 'global') return this.t('tax_global');\n    if (type === 'union') return this.t('tax_union');\n    if (type === 'country') return country;\n    if (type === 'region') return `${country}, ${region}`;\n    if (type === 'local') return `${country}, ${region}, ${city}`;\n    if (type === 'custom_tax') return this.t('tax_custom_tax');\n  }\n\n  private __getRateLabel({ is_live, rate }: Data) {\n    if (!is_live) return this.t('percent', { fraction: rate / 100 });\n\n    const provider = this.data?.service_provider as string | undefined;\n    if (provider === 'onesource') return 'Thomson Reuters ONESOURCE';\n    if (provider === 'avalara') return 'Avalara AvaTax 15';\n    if (provider === 'taxjar') return 'TaxJar';\n    if (provider === 'custom_tax_endpoint') return this.t('tax_rate_provider_custom');\n\n    return this.t('tax_rate_provider_default');\n  }\n}\n"]}
+{"version":3,"file":"TaxCard.js","sourceRoot":"","sources":["../../../../src/elements/public/TaxCard/TaxCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\n/**\n * Basic card displaying a tax.\n *\n * @element foxy-tax-card\n * @since 1.13.0\n */\nexport class TaxCard extends TranslatableMixin(InternalCard, 'tax-card')<Data> {\n  renderBody(): TemplateResult {\n    let taxItemCategoriesHref: string | undefined;\n\n    try {\n      const url = new URL(this.data?._links['fx:tax_item_categories'].href ?? '');\n      url.searchParams.set('limit', '1');\n      taxItemCategoriesHref = url.toString();\n    } catch {\n      taxItemCategoriesHref = undefined;\n    }\n\n    const taxItemCategories = this.__taxItemCategoriesLoader?.data;\n\n    return html`\n      <div class=\"leading-xs\">\n        <p class=\"flex items-center gap-m\" data-testid=\"title\">\n          <span class=\"font-medium flex-1\">${this.data?.name}&ZeroWidthSpace;</span>\n          ${taxItemCategories\n            ? html`\n                <foxy-i18n\n                  options=${JSON.stringify({\n                    context: taxItemCategories.total_items > 0 ? '' : 'empty',\n                    count: taxItemCategories.total_items,\n                  })}\n                  class=\"text-xs text-tertiary\"\n                  infer=\"\"\n                  key=\"tax_item_categories\"\n                >\n                </foxy-i18n>\n              `\n            : ''}\n        </p>\n\n        <p class=\"text-s text-secondary\" data-testid=\"subtitle\">\n          ${this.data ? this.__getTypeLabel(this.data) : ''} &bull;\n          ${this.data ? this.__getRateLabel(this.data) : ''}\n        </p>\n      </div>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(taxItemCategoriesHref)}\n        id=\"taxItemCategoriesLoader\"\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n    `;\n  }\n\n  private get __taxItemCategoriesLoader() {\n    type Loader = NucleonElement<Resource<Rels.TaxItemCategories>>;\n    return this.renderRoot.querySelector<Loader>('#taxItemCategoriesLoader');\n  }\n\n  private __getTypeLabel({ type, country, region, city }: Data) {\n    if (type === 'global') return this.t('tax_global');\n    if (type === 'union') return this.t('tax_union');\n    if (type === 'country') return country;\n    if (type === 'region') return `${country}, ${region}`;\n    if (type === 'local') return `${country}, ${region}, ${city}`;\n    if (type === 'custom_tax_endpoint') return this.t('tax_custom_tax');\n  }\n\n  private __getRateLabel({ is_live, rate }: Data) {\n    if (!is_live) return this.t('percent', { fraction: rate / 100 });\n\n    const provider = this.data?.service_provider;\n    if (provider === 'onesource') return 'Thomson Reuters ONESOURCE';\n    if (provider === 'avalara') return 'Avalara AvaTax 15';\n    if (provider === 'taxjar') return 'TaxJar';\n    if (provider === 'custom_tax') return this.t('tax_rate_provider_custom');\n\n    return this.t('tax_rate_provider_default');\n  }\n}\n"]}

package/dist/elements/public/TaxForm/TaxForm.js

@@ -38,7 +38,6 @@ export class TaxForm extends Base {
                 country: '',
                 region: '',
                 city: '',
-                // @ts-expect-error SDK types are not up to date.
                 service_provider: newValue === 'custom_tax_endpoint' ? 'custom_tax' : '',
                 apply_to_shipping: false,
                 use_origin_rates: false,
@@ -79,7 +78,6 @@ export class TaxForm extends Base {
             ({ rate: v, type, is_live }) => {
                 return (v === void 0 ||
                     v > 0 ||
-                    // @ts-expect-error SDK types are not up to date.
                     type === 'custom_tax_endpoint' ||
                     type === void 0 ||
                     is_live ||