@foxy.io/elements 1.16.0-beta.2 → 1.16.0-beta.5

package/dist/elements/public/DiscountBuilder/DiscountBuilder.js

@@ -0,0 +1,339 @@
+import { html, LitElement } from 'lit-element';
+import { repeat } from 'lit-html/directives/repeat';
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { InferrableMixin } from "../../../mixins/inferrable.js";
+import { ThemeableMixin } from "../../../mixins/themeable.js";
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { classMap } from "../../../utils/class-map.js";
+import { operatorGreaterThanOrEqual } from "../QueryBuilder/icons/operatorGreaterThanOrEqual.js";
+const NS = 'discount-builder';
+const Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(InferrableMixin(LitElement), NS)));
+export class DiscountBuilder extends Base {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            value: { type: String },
+        };
+    }
+    get parsedValue() {
+        let details = '';
+        let name = '';
+        let type = 'quantity_amount';
+        try {
+            const [[key, value]] = Array.from(new URLSearchParams(this.value).entries());
+            const parsedType = key.substring('discount_'.length);
+            const allowedTypes = [
+                'price_amount',
+                'price_percentage',
+                'quantity_amount',
+                'quantity_percentage',
+            ];
+            if (allowedTypes.includes(parsedType)) {
+                type = parsedType;
+            }
+            const detailsStart = value.indexOf('{');
+            const detailsEnd = value.lastIndexOf('}');
+            if (detailsStart !== -1 && detailsEnd !== -1) {
+                details = value.substring(detailsStart, detailsEnd);
+                name = value.substring(0, detailsStart);
+            }
+        }
+        catch (_a) {
+            //
+        }
+        return { type, name, details };
+    }
+    set parsedValue({ name, type, details }) {
+        this.value = new URLSearchParams([[`discount_${type}`, `${name}{${details}}`]]).toString();
+    }
+    render() {
+        var _a;
+        const details = this.parsedValue.details;
+        const tiers = details.split('|').filter(v => !!v.trim());
+        const method = (_a = (/[-+]/.test(tiers[0]) ? null : tiers.shift())) !== null && _a !== void 0 ? _a : 'single';
+        const renderedTiers = method === 'repeat' ? [tiers[0]] : [...tiers, undefined];
+        const type = this.parsedValue.type;
+        const [source, units] = type.split('_');
+        return html `
+      <div class="space-y-s">
+        ${repeat(renderedTiers, (tier, tierIndex) => {
+            const onChange = (changedParams) => {
+                var _a, _b, _c;
+                const newMethod = (_a = changedParams.method) !== null && _a !== void 0 ? _a : method;
+                const newSource = (_b = changedParams.source) !== null && _b !== void 0 ? _b : source;
+                const newUnits = (_c = changedParams.units) !== null && _c !== void 0 ? _c : units;
+                const newTier = changedParams.tier;
+                const newTiers = [...tiers];
+                if (newTier) {
+                    const newTierIndex = tier ? tierIndex : newTiers.length;
+                    const oldTiersCount = tier ? 1 : 0;
+                    newTiers.splice(newTierIndex, oldTiersCount, newTier);
+                }
+                this.parsedValue = {
+                    ...this.parsedValue,
+                    type: `${newSource}_${newUnits}`,
+                    details: `${newMethod}|${newTiers.join('|')}`,
+                };
+                this.dispatchEvent(new CustomEvent('change'));
+            };
+            const onDelete = () => {
+                const newTiers = tiers.filter((_, i) => i !== tierIndex);
+                const newDetails = `${method}|${newTiers.join('|')}`;
+                this.parsedValue = { ...this.parsedValue, details: newDetails };
+                this.dispatchEvent(new CustomEvent('change'));
+            };
+            return this.__renderTier({ source, method, units, tier, onChange, onDelete });
+        })}
+      </div>
+    `;
+    }
+    __renderSelect({ label, value, options, onChange }) {
+        const isInteractive = !this.disabled && !this.readonly;
+        return html `
+      <label
+        class=${classMap({
+            'h-xs whitespace-nowrap block ring-primary-50 rounded pl-s transition-colors': true,
+            'hover-bg-primary hover-text-primary-contrast focus-within-ring-2': isInteractive,
+            'bg-primary-10 text-primary': isInteractive,
+            'bg-contrast-5 text-disabled': this.disabled,
+            'bg-contrast-5 text-secondary': this.readonly && !this.disabled,
+        })}
+      >
+        <foxy-i18n class="sr-only" lang=${this.lang} key=${label} ns=${this.ns}></foxy-i18n>
+
+        <span class="relative leading-none font-medium flex items-center h-full">
+          <span class="truncate">${this.t(options[value])}</span>
+          <iron-icon class="icon-inline text-xl ml-xs" icon="icons:expand-more"></iron-icon>
+
+          <select
+            data-testclass="interactive editable"
+            class="opacity-0 absolute inset-0 focus-outline-none"
+            ?disabled=${!isInteractive}
+            @change=${(evt) => {
+            const select = evt.currentTarget;
+            onChange(select.options[select.selectedIndex].value);
+        }}
+          >
+            ${Object.entries(options).map(([optionValue, optionKey]) => {
+            return html `
+                <option value=${optionValue} ?selected=${optionValue === value}>
+                  ${this.t(optionKey)}
+                </option>
+              `;
+        })}
+          </select>
+        </span>
+      </label>
+    `;
+    }
+    __renderSwitch({ value, options, onChange }) {
+        const isInteractive = !this.disabled && !this.readonly;
+        const name = `switch-${Math.floor(Math.random() * Math.pow(10, 10))}`;
+        const dotStyle = 'width: 0.4rem; height: 0.4rem';
+        return html `
+      <div
+        class=${classMap({
+            'h-xs px-xs space-x-xs flex items-center rounded transition-colors': true,
+            'hover-bg-primary hover-text-primary-contrast focus-within-ring-2': isInteractive,
+            'ring-primary-50 cursor-pointer bg-primary-10 text-primary': isInteractive,
+            'bg-contrast-5 text-disabled': this.disabled,
+            'bg-contrast-5 text-secondary': this.readonly && !this.disabled,
+        })}
+        @click=${(evt) => {
+            if (!isInteractive)
+                return;
+            const target = evt.currentTarget;
+            const firstInput = target.querySelector('input');
+            firstInput.focus();
+            onChange(value === 0 ? 1 : 0);
+        }}
+      >
+        <div class="leading-none font-medium px-xs pointer-events-none">
+          ${options.map((option, optionIndex) => {
+            return html `
+              <label>
+                <foxy-i18n
+                  class=${classMap({ 'sr-only': optionIndex !== value })}
+                  lang=${this.lang}
+                  key=${option}
+                  ns=${this.ns}
+                >
+                </foxy-i18n>
+
+                <input
+                  data-testclass="interactive editable"
+                  class="sr-only"
+                  value=${option}
+                  name=${name}
+                  type="radio"
+                  ?disabled=${!isInteractive}
+                  ?checked=${optionIndex === value}
+                  @change=${(evt) => {
+                const input = evt.currentTarget;
+                if (input.checked)
+                    onChange(optionIndex);
+            }}
+                />
+              </label>
+            `;
+        })}
+        </div>
+
+        <div class="flex justify-evenly h-full ${value ? 'flex-col-reverse' : 'flex-col'}">
+          <div style=${dotStyle} class="bg-current rounded-full"></div>
+          <div style=${dotStyle} class="border border-current rounded-full"></div>
+        </div>
+      </div>
+    `;
+    }
+    __renderField({ value, label, onChange }) {
+        const isInteractive = !this.disabled && !this.readonly;
+        return html `
+      <label>
+        <foxy-i18n class="sr-only" lang=${this.lang} key=${label} ns=${this.ns}></foxy-i18n>
+        <input
+          data-testclass="interactive editable"
+          class=${classMap({
+            'transition-colors border p-xs h-xs font-medium text-m rounded w-xl': true,
+            'ring-primary-50 text-body bg-contrast-10': isInteractive,
+            'hover-bg-contrast-20': isInteractive,
+            'focus-outline-none focus-ring-2': isInteractive,
+            'text-disabled bg-contrast-5': this.disabled,
+            'text-secondary': this.readonly && !this.disabled,
+            'border-transparent border-solid': !this.readonly,
+            'border-dashed border-contrast-30': this.readonly,
+        })}
+          type="number"
+          min="0"
+          ?disabled=${!isInteractive}
+          .value=${value}
+          @input=${(evt) => {
+            const input = evt.currentTarget;
+            onChange(input.value);
+        }}
+        />
+      </label>
+    `;
+    }
+    __renderTier(params) {
+        var _a;
+        const tier = (_a = params.tier) !== null && _a !== void 0 ? _a : '0-0';
+        const sign = tier.includes('+') ? '+' : '-';
+        const [from, adjustment] = tier.split(/[-+]/).map(v => parseFloat(v));
+        return html `
+      <div
+        data-testclass="rules:tier"
+        aria-label=${this.t('tier')}
+        class=${classMap({
+            'flex items-start justify-between rounded-t-l rounded-b-l': true,
+            'border border-contrast-10': true,
+            'border-dashed': !params.tier,
+        })}
+      >
+        <div
+          class=${classMap({
+            'transition-colors flex flex-wrap items-center gap-s p-s': true,
+            'text-tertiary': !this.disabled,
+            'text-disabled': this.disabled,
+        })}
+        >
+          <foxy-i18n
+            class="uppercase text-s font-semibold"
+            lang=${this.lang}
+            key="tier_if"
+            ns=${this.ns}
+          >
+          </foxy-i18n>
+
+          ${this.__renderSwitch({
+            options: ['total', 'quantity'],
+            value: params.source === 'price' ? 0 : 1,
+            onChange: i => params.onChange({ source: i ? 'quantity' : 'price' }),
+        })}
+
+          <div class="h-s w-s">${operatorGreaterThanOrEqual}</div>
+
+          ${this.__renderField({
+            label: 'from',
+            value: String(from),
+            onChange: v => params.onChange({ tier: `${v}${sign}${adjustment}` }),
+        })}
+
+          <foxy-i18n
+            class="uppercase text-s font-semibold"
+            lang=${this.lang}
+            key="tier_then"
+            ns=${this.ns}
+          >
+          </foxy-i18n>
+
+          ${this.__renderSwitch({
+            options: ['reduce', 'increase'],
+            value: sign === '-' ? 0 : 1,
+            onChange: i => params.onChange({ tier: `${from}${i ? '+' : '-'}${adjustment}` }),
+        })}
+
+          <!---->
+
+          ${this.__renderSelect({
+            options: {
+                incremental: 'tier_incremental',
+                allunits: 'tier_allunits',
+                repeat: 'tier_repeat',
+                single: 'tier_single',
+            },
+            value: params.method,
+            label: 'target',
+            onChange: v => params.onChange({ method: v }),
+        })}
+
+          <foxy-i18n
+            class="uppercase text-s font-semibold"
+            lang=${this.lang}
+            key="tier_by"
+            ns=${this.ns}
+          >
+          </foxy-i18n>
+
+          ${this.__renderField({
+            label: 'adjustment',
+            value: String(adjustment),
+            onChange: v => params.onChange({ tier: `${from}${sign}${v}` }),
+        })}
+
+          <!---->
+
+          ${this.__renderSwitch({
+            value: params.units === 'percentage' ? 0 : 1,
+            options: ['%', '¤'],
+            onChange: i => params.onChange({ units: i ? 'amount' : 'percentage' }),
+        })}
+        </div>
+
+        ${params.tier
+            ? html `
+              <button
+                data-testclass="interactive"
+                aria-label=${this.t('delete')}
+                class=${classMap({
+                'w-s h-s m-s flex-shrink-0 rounded transition-colors ring-primary-50': true,
+                'text-tertiary hover-text-secondary focus-outline-none focus-ring-2': !this.disabled,
+                'text-disabled cursor-default': this.disabled,
+            })}
+                ?disabled=${this.disabled}
+                ?hidden=${this.readonly}
+                @click=${() => params.onDelete()}
+              >
+                <iron-icon icon="lumo:cross"></iron-icon>
+              </button>
+            `
+            : ''}
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=DiscountBuilder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DiscountBuilder.js","sourceRoot":"","sources":["../../../../src/elements/public/DiscountBuilder/DiscountBuilder.ts"],"names":[],"mappings":"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","sourcesContent":["import { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { html, LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { InferrableMixin } from '../../../mixins/inferrable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { operatorGreaterThanOrEqual } from '../QueryBuilder/icons/operatorGreaterThanOrEqual';\n\ntype DiscountType = Resource<Rels.Coupon>['coupon_discount_type'];\ntype ParsedValue = { name: string; type: DiscountType; details: string };\n\ntype RulesTierParams = {\n  source: string;\n  method: string;\n  units: string;\n  tier?: string;\n  onChange: (newParams: Partial<RulesTierParams>) => void;\n  onDelete: () => void;\n};\n\ntype RulesTierFieldParams = {\n  value: string;\n  label: string;\n  onChange: (newValue: string) => void;\n};\n\ntype RulesTierSwitchParams = {\n  value: number;\n  options: [string, string];\n  onChange: (newValueIndex: number) => void;\n};\n\ntype RulesTierSelectParams = {\n  label: string;\n  value: string;\n  options: Record<string, string>;\n  onChange: (newValue: string) => void;\n};\n\nconst NS = 'discount-builder';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(InferrableMixin(LitElement), NS)));\n\nexport class DiscountBuilder extends Base {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      value: { type: String },\n    };\n  }\n\n  value = '';\n\n  get parsedValue(): ParsedValue {\n    let details = '';\n    let name = '';\n    let type: DiscountType = 'quantity_amount';\n\n    try {\n      const [[key, value]] = Array.from(new URLSearchParams(this.value).entries());\n\n      const parsedType = key.substring('discount_'.length);\n      const allowedTypes = [\n        'price_amount',\n        'price_percentage',\n        'quantity_amount',\n        'quantity_percentage',\n      ];\n\n      if (allowedTypes.includes(parsedType)) {\n        type = parsedType as DiscountType;\n      }\n\n      const detailsStart = value.indexOf('{');\n      const detailsEnd = value.lastIndexOf('}');\n\n      if (detailsStart !== -1 && detailsEnd !== -1) {\n        details = value.substring(detailsStart, detailsEnd);\n        name = value.substring(0, detailsStart);\n      }\n    } catch {\n      //\n    }\n\n    return { type, name, details };\n  }\n\n  set parsedValue({ name, type, details }: ParsedValue) {\n    this.value = new URLSearchParams([[`discount_${type}`, `${name}{${details}}`]]).toString();\n  }\n\n  render(): TemplateResult {\n    const details = this.parsedValue.details;\n    const tiers = details.split('|').filter(v => !!v.trim());\n    const method = (/[-+]/.test(tiers[0]) ? null : tiers.shift()) ?? 'single';\n    const renderedTiers = method === 'repeat' ? [tiers[0]] : [...tiers, undefined];\n\n    const type = this.parsedValue.type;\n    const [source, units] = type.split('_');\n\n    return html`\n      <div class=\"space-y-s\">\n        ${repeat(renderedTiers, (tier, tierIndex) => {\n          const onChange = (changedParams: Partial<RulesTierParams>) => {\n            const newMethod = changedParams.method ?? method;\n            const newSource = changedParams.source ?? source;\n            const newUnits = changedParams.units ?? units;\n            const newTier = changedParams.tier;\n            const newTiers = [...tiers];\n\n            if (newTier) {\n              const newTierIndex = tier ? tierIndex : newTiers.length;\n              const oldTiersCount = tier ? 1 : 0;\n              newTiers.splice(newTierIndex, oldTiersCount, newTier);\n            }\n\n            this.parsedValue = {\n              ...this.parsedValue,\n              type: `${newSource}_${newUnits}` as DiscountType,\n              details: `${newMethod}|${newTiers.join('|')}`,\n            };\n\n            this.dispatchEvent(new CustomEvent('change'));\n          };\n\n          const onDelete = () => {\n            const newTiers = tiers.filter((_, i) => i !== tierIndex);\n            const newDetails = `${method}|${newTiers.join('|')}`;\n\n            this.parsedValue = { ...this.parsedValue, details: newDetails };\n            this.dispatchEvent(new CustomEvent('change'));\n          };\n\n          return this.__renderTier({ source, method, units, tier, onChange, onDelete });\n        })}\n      </div>\n    `;\n  }\n\n  private __renderSelect({ label, value, options, onChange }: RulesTierSelectParams) {\n    const isInteractive = !this.disabled && !this.readonly;\n\n    return html`\n      <label\n        class=${classMap({\n          'h-xs whitespace-nowrap block ring-primary-50 rounded pl-s transition-colors': true,\n          'hover-bg-primary hover-text-primary-contrast focus-within-ring-2': isInteractive,\n          'bg-primary-10 text-primary': isInteractive,\n          'bg-contrast-5 text-disabled': this.disabled,\n          'bg-contrast-5 text-secondary': this.readonly && !this.disabled,\n        })}\n      >\n        <foxy-i18n class=\"sr-only\" lang=${this.lang} key=${label} ns=${this.ns}></foxy-i18n>\n\n        <span class=\"relative leading-none font-medium flex items-center h-full\">\n          <span class=\"truncate\">${this.t(options[value])}</span>\n          <iron-icon class=\"icon-inline text-xl ml-xs\" icon=\"icons:expand-more\"></iron-icon>\n\n          <select\n            data-testclass=\"interactive editable\"\n            class=\"opacity-0 absolute inset-0 focus-outline-none\"\n            ?disabled=${!isInteractive}\n            @change=${(evt: Event) => {\n              const select = evt.currentTarget as HTMLSelectElement;\n              onChange(select.options[select.selectedIndex].value);\n            }}\n          >\n            ${Object.entries(options).map(([optionValue, optionKey]) => {\n              return html`\n                <option value=${optionValue} ?selected=${optionValue === value}>\n                  ${this.t(optionKey)}\n                </option>\n              `;\n            })}\n          </select>\n        </span>\n      </label>\n    `;\n  }\n\n  private __renderSwitch({ value, options, onChange }: RulesTierSwitchParams) {\n    const isInteractive = !this.disabled && !this.readonly;\n    const name = `switch-${Math.floor(Math.random() * Math.pow(10, 10))}`;\n    const dotStyle = 'width: 0.4rem; height: 0.4rem';\n\n    return html`\n      <div\n        class=${classMap({\n          'h-xs px-xs space-x-xs flex items-center rounded transition-colors': true,\n          'hover-bg-primary hover-text-primary-contrast focus-within-ring-2': isInteractive,\n          'ring-primary-50 cursor-pointer bg-primary-10 text-primary': isInteractive,\n          'bg-contrast-5 text-disabled': this.disabled,\n          'bg-contrast-5 text-secondary': this.readonly && !this.disabled,\n        })}\n        @click=${(evt: Event) => {\n          if (!isInteractive) return;\n\n          const target = evt.currentTarget as HTMLDivElement;\n          const firstInput = target.querySelector('input') as HTMLInputElement;\n\n          firstInput.focus();\n          onChange(value === 0 ? 1 : 0);\n        }}\n      >\n        <div class=\"leading-none font-medium px-xs pointer-events-none\">\n          ${options.map((option, optionIndex) => {\n            return html`\n              <label>\n                <foxy-i18n\n                  class=${classMap({ 'sr-only': optionIndex !== value })}\n                  lang=${this.lang}\n                  key=${option}\n                  ns=${this.ns}\n                >\n                </foxy-i18n>\n\n                <input\n                  data-testclass=\"interactive editable\"\n                  class=\"sr-only\"\n                  value=${option}\n                  name=${name}\n                  type=\"radio\"\n                  ?disabled=${!isInteractive}\n                  ?checked=${optionIndex === value}\n                  @change=${(evt: Event) => {\n                    const input = evt.currentTarget as HTMLInputElement;\n                    if (input.checked) onChange(optionIndex);\n                  }}\n                />\n              </label>\n            `;\n          })}\n        </div>\n\n        <div class=\"flex justify-evenly h-full ${value ? 'flex-col-reverse' : 'flex-col'}\">\n          <div style=${dotStyle} class=\"bg-current rounded-full\"></div>\n          <div style=${dotStyle} class=\"border border-current rounded-full\"></div>\n        </div>\n      </div>\n    `;\n  }\n\n  private __renderField({ value, label, onChange }: RulesTierFieldParams) {\n    const isInteractive = !this.disabled && !this.readonly;\n\n    return html`\n      <label>\n        <foxy-i18n class=\"sr-only\" lang=${this.lang} key=${label} ns=${this.ns}></foxy-i18n>\n        <input\n          data-testclass=\"interactive editable\"\n          class=${classMap({\n            'transition-colors border p-xs h-xs font-medium text-m rounded w-xl': true,\n            'ring-primary-50 text-body bg-contrast-10': isInteractive,\n            'hover-bg-contrast-20': isInteractive,\n            'focus-outline-none focus-ring-2': isInteractive,\n            'text-disabled bg-contrast-5': this.disabled,\n            'text-secondary': this.readonly && !this.disabled,\n            'border-transparent border-solid': !this.readonly,\n            'border-dashed border-contrast-30': this.readonly,\n          })}\n          type=\"number\"\n          min=\"0\"\n          ?disabled=${!isInteractive}\n          .value=${value}\n          @input=${(evt: InputEvent) => {\n            const input = evt.currentTarget as HTMLInputElement;\n            onChange(input.value);\n          }}\n        />\n      </label>\n    `;\n  }\n\n  private __renderTier(params: RulesTierParams) {\n    const tier = params.tier ?? '0-0';\n    const sign = tier.includes('+') ? '+' : '-';\n    const [from, adjustment] = tier.split(/[-+]/).map(v => parseFloat(v));\n\n    return html`\n      <div\n        data-testclass=\"rules:tier\"\n        aria-label=${this.t('tier')}\n        class=${classMap({\n          'flex items-start justify-between rounded-t-l rounded-b-l': true,\n          'border border-contrast-10': true,\n          'border-dashed': !params.tier,\n        })}\n      >\n        <div\n          class=${classMap({\n            'transition-colors flex flex-wrap items-center gap-s p-s': true,\n            'text-tertiary': !this.disabled,\n            'text-disabled': this.disabled,\n          })}\n        >\n          <foxy-i18n\n            class=\"uppercase text-s font-semibold\"\n            lang=${this.lang}\n            key=\"tier_if\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n\n          ${this.__renderSwitch({\n            options: ['total', 'quantity'],\n            value: params.source === 'price' ? 0 : 1,\n            onChange: i => params.onChange({ source: i ? 'quantity' : 'price' }),\n          })}\n\n          <div class=\"h-s w-s\">${operatorGreaterThanOrEqual}</div>\n\n          ${this.__renderField({\n            label: 'from',\n            value: String(from),\n            onChange: v => params.onChange({ tier: `${v}${sign}${adjustment}` }),\n          })}\n\n          <foxy-i18n\n            class=\"uppercase text-s font-semibold\"\n            lang=${this.lang}\n            key=\"tier_then\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n\n          ${this.__renderSwitch({\n            options: ['reduce', 'increase'],\n            value: sign === '-' ? 0 : 1,\n            onChange: i => params.onChange({ tier: `${from}${i ? '+' : '-'}${adjustment}` }),\n          })}\n\n          <!---->\n\n          ${this.__renderSelect({\n            options: {\n              incremental: 'tier_incremental',\n              allunits: 'tier_allunits',\n              repeat: 'tier_repeat',\n              single: 'tier_single',\n            },\n            value: params.method,\n            label: 'target',\n            onChange: v => params.onChange({ method: v }),\n          })}\n\n          <foxy-i18n\n            class=\"uppercase text-s font-semibold\"\n            lang=${this.lang}\n            key=\"tier_by\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n\n          ${this.__renderField({\n            label: 'adjustment',\n            value: String(adjustment),\n            onChange: v => params.onChange({ tier: `${from}${sign}${v}` }),\n          })}\n\n          <!---->\n\n          ${this.__renderSwitch({\n            value: params.units === 'percentage' ? 0 : 1,\n            options: ['%', '¤'],\n            onChange: i => params.onChange({ units: i ? 'amount' : 'percentage' }),\n          })}\n        </div>\n\n        ${params.tier\n          ? html`\n              <button\n                data-testclass=\"interactive\"\n                aria-label=${this.t('delete')}\n                class=${classMap({\n                  'w-s h-s m-s flex-shrink-0 rounded transition-colors ring-primary-50': true,\n                  'text-tertiary hover-text-secondary focus-outline-none focus-ring-2':\n                    !this.disabled,\n                  'text-disabled cursor-default': this.disabled,\n                })}\n                ?disabled=${this.disabled}\n                ?hidden=${this.readonly}\n                @click=${() => params.onDelete()}\n              >\n                <iron-icon icon=\"lumo:cross\"></iron-icon>\n              </button>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,2 @@
+import { DiscountBuilder } from './DiscountBuilder';
+export { DiscountBuilder };

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

@@ -0,0 +1,4 @@
+import { DiscountBuilder } from "./DiscountBuilder.js";
+customElements.define('foxy-discount-builder', DiscountBuilder);
+export { DiscountBuilder };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/DiscountBuilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,6BAA0B;AAEpD,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,eAAe,CAAC,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import { DiscountBuilder } from './DiscountBuilder';\n\ncustomElements.define('foxy-discount-builder', DiscountBuilder);\n\nexport { DiscountBuilder };\n"]}

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

@@ -0,0 +1,25 @@
+import { TemplateResult } from 'lit-html';
+import { Data } from './types';
+import { TwoLineCard } from '../CustomFieldCard/TwoLineCard';
+declare const Base: typeof TwoLineCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+/**
+ * Basic card displaying a discount detail.
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-discount-detail-card
+ * @since 1.17.0
+ */
+export declare class DiscountDetailCard extends Base<Data> {
+    private __currencyDisplay;
+    private __currency;
+    render(): TemplateResult;
+    protected _sendGet(): Promise<Data>;
+}
+export {};

package/dist/elements/public/DiscountDetailCard/DiscountDetailCard.js

@@ -0,0 +1,58 @@
+import { html } from 'lit-html';
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { TwoLineCard } from "../CustomFieldCard/TwoLineCard.js";
+const NS = 'discount-detail-card';
+const Base = TranslatableMixin(TwoLineCard, NS);
+/**
+ * Basic card displaying a discount detail.
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-discount-detail-card
+ * @since 1.17.0
+ */
+export class DiscountDetailCard extends Base {
+    constructor() {
+        super(...arguments);
+        this.__currencyDisplay = '';
+        this.__currency = '';
+    }
+    render() {
+        return super.render({
+            title: data => html `${data.name}`,
+            subtitle: data => {
+                let text;
+                try {
+                    text = Math.abs(data.amount_per).toLocaleString(this.lang || 'en', {
+                        maximumFractionDigits: 2,
+                        minimumFractionDigits: 2,
+                        currencyDisplay: this.__currencyDisplay,
+                        currency: this.__currency,
+                        style: 'currency',
+                    });
+                }
+                catch (_a) {
+                    text = '--';
+                }
+                return html `
+          <span class=${data.amount_per > 0 ? 'text-success' : 'text-error'}>${text}</span>
+        `;
+            },
+        });
+    }
+    async _sendGet() {
+        const discount = await super._sendGet();
+        const [transaction, store] = await Promise.all([
+            super._fetch(discount._links['fx:transaction'].href),
+            super._fetch(discount._links['fx:store'].href),
+        ]);
+        this.__currency = transaction.currency_code;
+        this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';
+        return discount;
+    }
+}
+//# sourceMappingURL=DiscountDetailCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DiscountDetailCard.js","sourceRoot":"","sources":["../../../../src/elements/public/DiscountDetailCard/DiscountDetailCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAKhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAE7D,MAAM,EAAE,GAAG,sBAAsB,CAAC;AAClC,MAAM,IAAI,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AAEhD;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,kBAAmB,SAAQ,IAAU;IAAlD;;QACU,sBAAiB,GAAG,EAAE,CAAC;QAEvB,eAAU,GAAG,EAAE,CAAC;IA0C1B,CAAC;IAxCC,MAAM;QACJ,OAAO,KAAK,CAAC,MAAM,CAAC;YAClB,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,EAAE;YACjC,QAAQ,EAAE,IAAI,CAAC,EAAE;gBACf,IAAI,IAAY,CAAC;gBAEjB,IAAI;oBACF,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE;wBACjE,qBAAqB,EAAE,CAAC;wBACxB,qBAAqB,EAAE,CAAC;wBACxB,eAAe,EAAE,IAAI,CAAC,iBAAiB;wBACvC,QAAQ,EAAE,IAAI,CAAC,UAAU;wBACzB,KAAK,EAAE,UAAU;qBAClB,CAAC,CAAC;iBACJ;gBAAC,WAAM;oBACN,IAAI,GAAG,IAAI,CAAC;iBACb;gBAED,OAAO,IAAI,CAAA;wBACK,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,IAAI,IAAI;SAC1E,CAAC;YACJ,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAES,KAAK,CAAC,QAAQ;QAItB,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;QACxC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YAC7C,KAAK,CAAC,MAAM,CAAc,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC;YACjE,KAAK,CAAC,MAAM,CAAQ,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC;SACtD,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC;QAC5C,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,iCAAiC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;QAErF,OAAO,QAAQ,CAAC;IAClB,CAAC;CACF","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { Data } from './types';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\n\nconst NS = 'discount-detail-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/**\n * Basic card displaying a discount detail.\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @element foxy-discount-detail-card\n * @since 1.17.0\n */\nexport class DiscountDetailCard extends Base<Data> {\n  private __currencyDisplay = '';\n\n  private __currency = '';\n\n  render(): TemplateResult {\n    return super.render({\n      title: data => html`${data.name}`,\n      subtitle: data => {\n        let text: string;\n\n        try {\n          text = Math.abs(data.amount_per).toLocaleString(this.lang || 'en', {\n            maximumFractionDigits: 2,\n            minimumFractionDigits: 2,\n            currencyDisplay: this.__currencyDisplay,\n            currency: this.__currency,\n            style: 'currency',\n          });\n        } catch {\n          text = '--';\n        }\n\n        return html`\n          <span class=${data.amount_per > 0 ? 'text-success' : 'text-error'}>${text}</span>\n        `;\n      },\n    });\n  }\n\n  protected async _sendGet(): Promise<Data> {\n    type Transaction = Resource<Rels.Transaction>;\n    type Store = Resource<Rels.Store>;\n\n    const discount = await super._sendGet();\n    const [transaction, store] = await Promise.all([\n      super._fetch<Transaction>(discount._links['fx:transaction'].href),\n      super._fetch<Store>(discount._links['fx:store'].href),\n    ]);\n\n    this.__currency = transaction.currency_code;\n    this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n\n    return discount;\n  }\n}\n"]}

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

@@ -0,0 +1,5 @@
+import '../../internal/InternalSandbox/index';
+import '../Spinner/index';
+import '../I18n/index';
+import { DiscountDetailCard } from './DiscountDetailCard';
+export { DiscountDetailCard };

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

@@ -0,0 +1,7 @@
+import "../../internal/InternalSandbox/index.js";
+import "../Spinner/index.js";
+import "../I18n/index.js";
+import { DiscountDetailCard } from "./DiscountDetailCard.js";
+customElements.define('foxy-discount-detail-card', DiscountDetailCard);
+export { DiscountDetailCard };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/DiscountDetailCard/index.ts"],"names":[],"mappings":"AAAA,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,kBAAkB,EAAE,gCAA6B;AAE1D,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,kBAAkB,CAAC,CAAC;AAEvE,OAAO,EAAE,kBAAkB,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { DiscountDetailCard } from './DiscountDetailCard';\n\ncustomElements.define('foxy-discount-detail-card', DiscountDetailCard);\n\nexport { DiscountDetailCard };\n"]}

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

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

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

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

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

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

package/dist/elements/public/GiftCardForm/GiftCardForm.js

@@ -55,21 +55,34 @@ export class GiftCardForm extends Base {
         this.__codesTableColumns = [
             {
                 header: ctx => html `<foxy-i18n lang=${ctx.lang} key="code" ns=${ctx.ns}></foxy-i18n>`,
-                cell: ctx => html `
-        <vaadin-button
-          theme="tertiary contrast"
-          class="p-0"
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('codes', true)}
-          @click=${(evt) => {
-                    const dialog = this.renderRoot.querySelector('#code-dialog');
-                    const button = evt.currentTarget;
-                    dialog.href = ctx.data._links.self.href;
-                    dialog.show(button);
-                }}
-        >
-          <span class="font-tnum">${ctx.data.code}</span>
-        </vaadin-button>
-      `,
+                cell: ctx => {
+                    const isDisabled = !this.in('idle') || this.disabledSelector.matches('codes', true);
+                    return html `
+          <div class="flex items-center gap-xs">
+            <vaadin-button
+              theme="tertiary-inline contrast"
+              class="p-0"
+              ?disabled=${isDisabled}
+              @click=${(evt) => {
+                        const dialog = this.renderRoot.querySelector('#code-dialog');
+                        const button = evt.currentTarget;
+                        dialog.href = ctx.data._links.self.href;
+                        dialog.show(button);
+                    }}
+            >
+              <span class="font-tnum">${ctx.data.code}</span>
+            </vaadin-button>
+
+            <foxy-copy-to-clipboard
+              ?disabled=${isDisabled}
+              text=${ctx.data.code}
+              lang=${ctx.lang}
+              ns="${ctx.ns} copy-to-clipboard"
+            >
+            </foxy-copy-to-clipboard>
+          </div>
+        `;
+                },
             },
             {
                 header: ctx => html `<foxy-i18n lang=${ctx.lang} key="date_created" ns=${ctx.ns}></foxy-i18n>`,