@foxy.io/elements 1.15.0-beta.5 → 1.15.0-beta.6

package/dist/elements/public/GiftCardCard/GiftCardCard.js

@@ -4,7 +4,6 @@ import { NucleonElement } from "../NucleonElement/NucleonElement.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { classMap } from "../../../utils/class-map.js";
-import { parseDuration } from "../../../utils/parse-duration.js";
 const NS = 'gift-card-card';
 const Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));
 /**
@@ -60,12 +59,12 @@ export class GiftCardCard extends Base {
         const name = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : html `​`;
         const code = (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.currency_code) !== null && _d !== void 0 ? _d : html `​`;
         return html `
-      <div>
+      <div data-testid="title">
         ${this.renderTemplateOrSlot('title:before')}
 
         <div class="flex items-center justify-between">
           <div class="font-semibold truncate">${name}</div>
-          <div class="text-tertiary text-s flex-shrink-0">${code}</div>
+          <div class="text-tertiary uppercase text-s flex-shrink-0">${code}</div>
         </div>
 
         ${this.renderTemplateOrSlot('title:after')}
@@ -74,38 +73,16 @@ export class GiftCardCard extends Base {
     }
     __renderStatus() {
         var _a;
-        let options;
-        let key;
-        if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.expires_after) {
-            let value;
-            try {
-                const rtf = new Intl.RelativeTimeFormat(this.lang);
-                let { count, units } = parseDuration(this.data.expires_after, true);
-                if (count === 0.5 && units === 'month') {
-                    count = 2;
-                    units = 'week';
-                }
-                value = rtf.format(count, units);
-            }
-            catch (_b) {
-                value = this.data.expires_after;
-            }
-            options = JSON.stringify({ value });
-            key = 'expires_after_value';
-        }
-        else {
-            options = '';
-            key = 'never_expires';
-        }
+        const expiresAfter = (_a = this.data) === null || _a === void 0 ? void 0 : _a.expires_after;
         return html `
-      <div>
+      <div data-testid="status">
         ${this.renderTemplateOrSlot('status:before')}
 
         <foxy-i18n
-          options=${options}
+          options=${JSON.stringify({ value: expiresAfter })}
           class="block truncate text-s text-tertiary"
           lang=${this.lang}
-          key=${key}
+          key=${expiresAfter ? 'expires_after_value' : 'never_expires'}
           ns=${this.ns}
         >
         </foxy-i18n>

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

@@ -1 +1 @@
-{"version":3,"file":"GiftCardCard.js","sourceRoot":"","sources":["../../../../src/elements/public/GiftCardCard/GiftCardCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { parseDuration } from '../../../utils/parse-duration';\n\nconst NS = 'gift-card-card';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Basic card displaying a gift card.\n *\n * @slot title:before\n * @slot title:after\n * @slot status:before\n * @slot status:after\n *\n * @element foxy-gift-card-card\n * @since 1.15.0\n */\nexport class GiftCardCard extends Base<Data> {\n  templates: Templates = {};\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n\n    return html`\n      <div\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative leading-m font-lumo text-m\"\n      >\n        <div class=${classMap({ 'transition-opacity': true, 'opacity-0': !this.data })}>\n          ${hiddenSelector.matches('title', true) ? '' : this.__renderTitle()}\n          ${hiddenSelector.matches('status', true) ? '' : this.__renderStatus()}\n        </div>\n\n        <div\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition-opacity': true,\n            'opacity-0': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"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  }\n\n  private __renderTitle() {\n    const name = this.data?.name ?? html`&ZeroWidthSpace;`;\n    const code = this.data?.currency_code ?? html`&ZeroWidthSpace;`;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('title:before')}\n\n        <div class=\"flex items-center justify-between\">\n          <div class=\"font-semibold truncate\">${name}</div>\n          <div class=\"text-tertiary text-s flex-shrink-0\">${code}</div>\n        </div>\n\n        ${this.renderTemplateOrSlot('title:after')}\n      </div>\n    `;\n  }\n\n  private __renderStatus() {\n    let options: string;\n    let key: string;\n\n    if (this.data?.expires_after) {\n      let value: string;\n\n      try {\n        const rtf = new Intl.RelativeTimeFormat(this.lang);\n        let { count, units } = parseDuration(this.data.expires_after, true);\n\n        if (count === 0.5 && units === 'month') {\n          count = 2;\n          units = 'week';\n        }\n\n        value = rtf.format(count, units as Intl.RelativeTimeFormatUnit);\n      } catch {\n        value = this.data.expires_after;\n      }\n\n      options = JSON.stringify({ value });\n      key = 'expires_after_value';\n    } else {\n      options = '';\n      key = 'never_expires';\n    }\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('status:before')}\n\n        <foxy-i18n\n          options=${options}\n          class=\"block truncate text-s text-tertiary\"\n          lang=${this.lang}\n          key=${key}\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        ${this.renderTemplateOrSlot('status:after')}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"GiftCardCard.js","sourceRoot":"","sources":["../../../../src/elements/public/GiftCardCard/GiftCardCard.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAClE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD,MAAM,EAAE,GAAG,gBAAgB,CAAC;AAC5B,MAAM,IAAI,GAAG,cAAc,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;AAEtF;;;;;;;;;;GAUG;AACH,MAAM,OAAO,YAAa,SAAQ,IAAU;IAA5C;;QACE,cAAS,GAAc,EAAE,CAAC;IAyE5B,CAAC;IAvEC,MAAM;;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAE3C,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;;qBAId,QAAQ,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAC1E,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;YACjE,cAAc,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE;;;;kBAI7D,QAAQ,CAAC;YACf,8DAA8D,EAAE,IAAI;YACpE,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SACzB,CAAC;;;;oBAIQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;mBAE7E,IAAI,CAAC,IAAI;kBACV,IAAI,CAAC,EAAE,IAAI,YAAA,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,0CAAE,SAAS,mCAAI,EAAE;;;;;KAK3E,CAAC;IACJ,CAAC;IAEO,aAAa;;QACnB,MAAM,IAAI,eAAG,IAAI,CAAC,IAAI,0CAAE,IAAI,mCAAI,IAAI,CAAA,kBAAkB,CAAC;QACvD,MAAM,IAAI,eAAG,IAAI,CAAC,IAAI,0CAAE,aAAa,mCAAI,IAAI,CAAA,kBAAkB,CAAC;QAEhE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;;;gDAGH,IAAI;sEACkB,IAAI;;;UAGhE,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;KAE7C,CAAC;IACJ,CAAC;IAEO,cAAc;;QACpB,MAAM,YAAY,SAAG,IAAI,CAAC,IAAI,0CAAE,aAAa,CAAC;QAE9C,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC;;;oBAGhC,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;;iBAE1C,IAAI,CAAC,IAAI;gBACV,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,eAAe;eACvD,IAAI,CAAC,EAAE;;;;UAIZ,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;;KAE9C,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'gift-card-card';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Basic card displaying a gift card.\n *\n * @slot title:before\n * @slot title:after\n * @slot status:before\n * @slot status:after\n *\n * @element foxy-gift-card-card\n * @since 1.15.0\n */\nexport class GiftCardCard extends Base<Data> {\n  templates: Templates = {};\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n\n    return html`\n      <div\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative leading-m font-lumo text-m\"\n      >\n        <div class=${classMap({ 'transition-opacity': true, 'opacity-0': !this.data })}>\n          ${hiddenSelector.matches('title', true) ? '' : this.__renderTitle()}\n          ${hiddenSelector.matches('status', true) ? '' : this.__renderStatus()}\n        </div>\n\n        <div\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition-opacity': true,\n            'opacity-0': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"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  }\n\n  private __renderTitle() {\n    const name = this.data?.name ?? html`&ZeroWidthSpace;`;\n    const code = this.data?.currency_code ?? html`&ZeroWidthSpace;`;\n\n    return html`\n      <div data-testid=\"title\">\n        ${this.renderTemplateOrSlot('title:before')}\n\n        <div class=\"flex items-center justify-between\">\n          <div class=\"font-semibold truncate\">${name}</div>\n          <div class=\"text-tertiary uppercase text-s flex-shrink-0\">${code}</div>\n        </div>\n\n        ${this.renderTemplateOrSlot('title:after')}\n      </div>\n    `;\n  }\n\n  private __renderStatus() {\n    const expiresAfter = this.data?.expires_after;\n\n    return html`\n      <div data-testid=\"status\">\n        ${this.renderTemplateOrSlot('status:before')}\n\n        <foxy-i18n\n          options=${JSON.stringify({ value: expiresAfter })}\n          class=\"block truncate text-s text-tertiary\"\n          lang=${this.lang}\n          key=${expiresAfter ? 'expires_after_value' : 'never_expires'}\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        ${this.renderTemplateOrSlot('status:after')}\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -14,6 +14,9 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
  * @slot codes:before
  * @slot codes:after
  *
+ * @slot current-balance:before
+ * @slot current-balance:after
+ *
  * @slot import:before
  * @slot import:after
  *
@@ -25,7 +28,10 @@ export declare class GiftCardCodesForm extends Base<Data> {
     static get v8n(): NucleonV8N<Data>;
     templates: Templates;
     render(): TemplateResult;
+    private __getErrorMessage;
+    private __getValidator;
     private __renderCodes;
+    private __renderCurrentBalance;
     private __renderImport;
 }
 export {};

package/dist/elements/public/GiftCardCodesForm/GiftCardCodesForm.js

@@ -15,6 +15,9 @@ const Base = ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(TranslatableMi
  * @slot codes:before
  * @slot codes:after
  *
+ * @slot current-balance:before
+ * @slot current-balance:after
+ *
  * @slot import:before
  * @slot import:after
  *
@@ -28,6 +31,7 @@ export class GiftCardCodesForm extends Base {
     }
     static get scopedElements() {
         return {
+            'vaadin-integer-field': customElements.get('vaadin-integer-field'),
             'vaadin-button': customElements.get('vaadin-button'),
             'iron-icon': customElements.get('iron-icon'),
             'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
@@ -38,7 +42,10 @@ export class GiftCardCodesForm extends Base {
         };
     }
     static get v8n() {
-        return [({ gift_card_codes: v }) => (v && v.length > 0) || 'gift_card_codes_required'];
+        return [
+            ({ gift_card_codes: v }) => (v && v.length > 0) || 'gift_card_codes_required',
+            ({ current_balance: v }) => !v || v >= 0 || 'current_balance_negative',
+        ];
     }
     render() {
         var _a, _b;
@@ -59,6 +66,7 @@ export class GiftCardCodesForm extends Base {
         })}
         >
           ${hiddenSelector.matches('codes', true) ? '' : this.__renderCodes()}
+          ${hiddenSelector.matches('current-balance', true) ? '' : this.__renderCurrentBalance()}
           ${hiddenSelector.matches('import', true) ? '' : this.__renderImport()}
         </div>
 
@@ -96,6 +104,13 @@ export class GiftCardCodesForm extends Base {
       </div>
     `;
     }
+    __getErrorMessage(prefix) {
+        const error = this.errors.find(err => err.startsWith(prefix));
+        return error ? this.t(error.replace(prefix, 'v8n')) : '';
+    }
+    __getValidator(prefix) {
+        return () => !this.errors.some(err => err.startsWith(prefix));
+    }
     __renderCodes() {
         var _a;
         const maxVisible = 16;
@@ -190,6 +205,35 @@ export class GiftCardCodesForm extends Base {
       </div>
     `;
     }
+    __renderCurrentBalance() {
+        var _a;
+        const isTemplate = this.in({ idle: 'template' });
+        return html `
+      <div>
+        ${this.renderTemplateOrSlot('current-balance:before')}
+
+        <vaadin-integer-field
+          error-message=${this.__getErrorMessage('current_balance')}
+          label=${this.t('balance')}
+          class="w-full"
+          min="0"
+          ?disabled=${!isTemplate || this.disabledSelector.matches('current-balance', true)}
+          ?readonly=${this.readonlySelector.matches('current-balance', true)}
+          prevent-invalid-input
+          has-controls
+          .checkValidity=${this.__getValidator('current_balance')}
+          .value=${isTemplate ? (_a = this.form.current_balance) !== null && _a !== void 0 ? _a : 0 : ''}
+          @change=${(evt) => {
+            const field = evt.currentTarget;
+            this.edit({ current_balance: parseInt(field.value) });
+        }}
+        >
+        </vaadin-integer-field>
+
+        ${this.renderTemplateOrSlot('current-balance:after')}
+      </div>
+    `;
+    }
     __renderImport() {
         const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });
         const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });

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

@@ -1 +1 @@
-{"version":3,"file":"GiftCardCodesForm.js","sourceRoot":"","sources":["../../../../src/elements/public/GiftCardCodesForm/GiftCardCodesForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { EditableList } from '../../private/EditableList/EditableList';\nimport { Group } from '../../private/Group/Group';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'gift-card-codes-form';\nconst Base = ConfigurableMixin(\n  ThemeableMixin(ScopedElementsMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Form element for importing gift card codes (`fx:gift_card_codes`).\n *\n * @slot codes:before\n * @slot codes:after\n *\n * @slot import:before\n * @slot import:after\n *\n * @element foxy-gift-card-codes-form\n * @since 1.15.0\n */\nexport class GiftCardCodesForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'vaadin-button': customElements.get('vaadin-button'),\n      'iron-icon': customElements.get('iron-icon'),\n\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n\n      'x-editable-list': EditableList,\n      'x-group': Group,\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [({ gift_card_codes: v }) => (v && v.length > 0) || 'gift_card_codes_required'];\n  }\n\n  templates: Templates = {};\n\n  render(): TemplateResult {\n    const { hiddenSelector, lang, ns } = this;\n\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n    const isSnapshot = this.in({ idle: 'snapshot' });\n    const isTemplate = this.in({ idle: 'template' });\n\n    const transition = 'transition-opacity duration-500';\n    const hidden = 'opacity-0 pointer-events-none';\n\n    return html`\n      <div class=\"relative\">\n        <div\n          class=${classMap({\n            'relative space-y-m': true,\n            [transition]: true,\n            [hidden]: isSnapshot,\n          })}\n        >\n          ${hiddenSelector.matches('codes', true) ? '' : this.__renderCodes()}\n          ${hiddenSelector.matches('import', true) ? '' : this.__renderImport()}\n        </div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex flex-col items-center justify-center': true,\n            'text-center text-m text-secondary leading-m': true,\n            [transition]: true,\n            [hidden]: !isSnapshot,\n          })}\n        >\n          <div class=\"mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success\">\n            <iron-icon icon=\"icons:done-all\" class=\"m-auto text-success-contrast\"></iron-icon>\n          </div>\n\n          <foxy-i18n class=\"block\" lang=${lang} key=\"import_codes_done\" ns=${ns}></foxy-i18n>\n        </div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex': true,\n            [transition]: true,\n            [hidden]: !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isTemplate ? 'empty' : 'busy'}\n            lang=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private __renderCodes() {\n    const maxVisible = 16;\n    const codes = this.form.gift_card_codes ?? [];\n\n    const visibleCodes = codes.length > maxVisible ? codes.slice(-maxVisible) : codes;\n    const hiddenCodes = codes.length > maxVisible ? codes.slice(0, -maxVisible) : [];\n\n    const items = visibleCodes.map(code => {\n      let href: string;\n\n      try {\n        const url = new URL(this.parent);\n        url.searchParams.set('code', code);\n        href = url.toString();\n      } catch {\n        href = this.parent;\n      }\n\n      return {\n        value: code,\n        label: html`\n          <foxy-internal-gift-card-codes-form-list-item\n            group=${this.group}\n            href=${href}\n            lang=${this.lang}\n            ns=${this.ns}\n          >\n          </foxy-internal-gift-card-codes-form-list-item>\n        `,\n      };\n    });\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('codes:before')}\n\n        <x-group class=\"mb-xs\" frame>\n          <foxy-i18n slot=\"header\" lang=${this.lang} key=\"code_plural\" ns=${this.ns}></foxy-i18n>\n\n          <x-editable-list\n            lang=${this.lang}\n            ns=${this.ns}\n            ?disabled=${!this.in('idle') || this.disabledSelector.matches('codes', true)}\n            ?readonly=${this.readonlySelector.matches('codes', true)}\n            .items=${items}\n            @change=${(evt: CustomEvent) => {\n              const list = evt.currentTarget as EditableList;\n              const newCodes = new Set([...hiddenCodes, ...list.items.map(item => item.value)]);\n              this.edit({ gift_card_codes: [...newCodes] });\n            }}\n            @paste=${(evt: ClipboardEvent) => {\n              evt.preventDefault();\n\n              const text = evt.clipboardData?.getData('text') ?? '';\n              const pastedCodes = text\n                .split(' ')\n                .map(code => code.trim())\n                .filter(code => code.length > 0);\n\n              this.edit({ gift_card_codes: Array.from(new Set([...codes, ...pastedCodes])) });\n            }}\n          >\n            <div\n              class=\"ml-m py-s border-b border-contrast-10 font-lumo\"\n              ?hidden=${hiddenCodes.length === 0}\n            >\n              <foxy-i18n\n                options=${JSON.stringify({ count: hiddenCodes.length })}\n                class=\"block text-body text-m mb-xs\"\n                lang=${this.lang}\n                key=\"hidden_codes_header\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n\n              <foxy-i18n\n                class=\"block text-xs text-tertiary\"\n                lang=${this.lang}\n                key=\"hidden_codes_explainer\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n            </div>\n          </x-editable-list>\n        </x-group>\n\n        <foxy-i18n\n          class=\"block text-xs text-tertiary leading-s\"\n          lang=${this.lang}\n          key=\"code_import_hint\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        ${this.renderTemplateOrSlot('codes:after')}\n      </div>\n    `;\n  }\n\n  private __renderImport() {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('import:before')}\n\n        <vaadin-button\n          class=\"w-full mb-xs\"\n          theme=\"primary success\"\n          ?disabled=${!isValid || !this.in('idle') || this.disabledSelector.matches('import', true)}\n          @click=${this.submit}\n        >\n          <foxy-i18n ns=${this.ns} key=\"import\" lang=${this.lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('import:after')}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"GiftCardCodesForm.js","sourceRoot":"","sources":["../../../../src/elements/public/GiftCardCodesForm/GiftCardCodesForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { EditableList } from '../../private/EditableList/EditableList';\nimport { Group } from '../../private/Group/Group';\nimport { IntegerFieldElement } from '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'gift-card-codes-form';\nconst Base = ConfigurableMixin(\n  ThemeableMixin(ScopedElementsMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Form element for importing gift card codes (`fx:gift_card_codes`).\n *\n * @slot codes:before\n * @slot codes:after\n *\n * @slot current-balance:before\n * @slot current-balance:after\n *\n * @slot import:before\n * @slot import:after\n *\n * @element foxy-gift-card-codes-form\n * @since 1.15.0\n */\nexport class GiftCardCodesForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'vaadin-integer-field': customElements.get('vaadin-integer-field'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'iron-icon': customElements.get('iron-icon'),\n\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n\n      'x-editable-list': EditableList,\n      'x-group': Group,\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ gift_card_codes: v }) => (v && v.length > 0) || 'gift_card_codes_required',\n      ({ current_balance: v }) => !v || v >= 0 || 'current_balance_negative',\n    ];\n  }\n\n  templates: Templates = {};\n\n  render(): TemplateResult {\n    const { hiddenSelector, lang, ns } = this;\n\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n    const isSnapshot = this.in({ idle: 'snapshot' });\n    const isTemplate = this.in({ idle: 'template' });\n\n    const transition = 'transition-opacity duration-500';\n    const hidden = 'opacity-0 pointer-events-none';\n\n    return html`\n      <div class=\"relative\">\n        <div\n          class=${classMap({\n            'relative space-y-m': true,\n            [transition]: true,\n            [hidden]: isSnapshot,\n          })}\n        >\n          ${hiddenSelector.matches('codes', true) ? '' : this.__renderCodes()}\n          ${hiddenSelector.matches('current-balance', true) ? '' : this.__renderCurrentBalance()}\n          ${hiddenSelector.matches('import', true) ? '' : this.__renderImport()}\n        </div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex flex-col items-center justify-center': true,\n            'text-center text-m text-secondary leading-m': true,\n            [transition]: true,\n            [hidden]: !isSnapshot,\n          })}\n        >\n          <div class=\"mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success\">\n            <iron-icon icon=\"icons:done-all\" class=\"m-auto text-success-contrast\"></iron-icon>\n          </div>\n\n          <foxy-i18n class=\"block\" lang=${lang} key=\"import_codes_done\" ns=${ns}></foxy-i18n>\n        </div>\n\n        <div\n          class=${classMap({\n            'absolute inset-0 flex': true,\n            [transition]: true,\n            [hidden]: !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isTemplate ? 'empty' : 'busy'}\n            lang=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private __getErrorMessage(prefix: string) {\n    const error = this.errors.find(err => err.startsWith(prefix));\n    return error ? this.t(error.replace(prefix, 'v8n')) : '';\n  }\n\n  private __getValidator(prefix: string) {\n    return () => !this.errors.some(err => err.startsWith(prefix));\n  }\n\n  private __renderCodes() {\n    const maxVisible = 16;\n    const codes = this.form.gift_card_codes ?? [];\n\n    const visibleCodes = codes.length > maxVisible ? codes.slice(-maxVisible) : codes;\n    const hiddenCodes = codes.length > maxVisible ? codes.slice(0, -maxVisible) : [];\n\n    const items = visibleCodes.map(code => {\n      let href: string;\n\n      try {\n        const url = new URL(this.parent);\n        url.searchParams.set('code', code);\n        href = url.toString();\n      } catch {\n        href = this.parent;\n      }\n\n      return {\n        value: code,\n        label: html`\n          <foxy-internal-gift-card-codes-form-list-item\n            group=${this.group}\n            href=${href}\n            lang=${this.lang}\n            ns=${this.ns}\n          >\n          </foxy-internal-gift-card-codes-form-list-item>\n        `,\n      };\n    });\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('codes:before')}\n\n        <x-group class=\"mb-xs\" frame>\n          <foxy-i18n slot=\"header\" lang=${this.lang} key=\"code_plural\" ns=${this.ns}></foxy-i18n>\n\n          <x-editable-list\n            lang=${this.lang}\n            ns=${this.ns}\n            ?disabled=${!this.in('idle') || this.disabledSelector.matches('codes', true)}\n            ?readonly=${this.readonlySelector.matches('codes', true)}\n            .items=${items}\n            @change=${(evt: CustomEvent) => {\n              const list = evt.currentTarget as EditableList;\n              const newCodes = new Set([...hiddenCodes, ...list.items.map(item => item.value)]);\n              this.edit({ gift_card_codes: [...newCodes] });\n            }}\n            @paste=${(evt: ClipboardEvent) => {\n              evt.preventDefault();\n\n              const text = evt.clipboardData?.getData('text') ?? '';\n              const pastedCodes = text\n                .split(' ')\n                .map(code => code.trim())\n                .filter(code => code.length > 0);\n\n              this.edit({ gift_card_codes: Array.from(new Set([...codes, ...pastedCodes])) });\n            }}\n          >\n            <div\n              class=\"ml-m py-s border-b border-contrast-10 font-lumo\"\n              ?hidden=${hiddenCodes.length === 0}\n            >\n              <foxy-i18n\n                options=${JSON.stringify({ count: hiddenCodes.length })}\n                class=\"block text-body text-m mb-xs\"\n                lang=${this.lang}\n                key=\"hidden_codes_header\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n\n              <foxy-i18n\n                class=\"block text-xs text-tertiary\"\n                lang=${this.lang}\n                key=\"hidden_codes_explainer\"\n                ns=${this.ns}\n              >\n              </foxy-i18n>\n            </div>\n          </x-editable-list>\n        </x-group>\n\n        <foxy-i18n\n          class=\"block text-xs text-tertiary leading-s\"\n          lang=${this.lang}\n          key=\"code_import_hint\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        ${this.renderTemplateOrSlot('codes:after')}\n      </div>\n    `;\n  }\n\n  private __renderCurrentBalance() {\n    const isTemplate = this.in({ idle: 'template' });\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('current-balance:before')}\n\n        <vaadin-integer-field\n          error-message=${this.__getErrorMessage('current_balance')}\n          label=${this.t('balance')}\n          class=\"w-full\"\n          min=\"0\"\n          ?disabled=${!isTemplate || this.disabledSelector.matches('current-balance', true)}\n          ?readonly=${this.readonlySelector.matches('current-balance', true)}\n          prevent-invalid-input\n          has-controls\n          .checkValidity=${this.__getValidator('current_balance')}\n          .value=${isTemplate ? this.form.current_balance ?? 0 : ''}\n          @change=${(evt: CustomEvent) => {\n            const field = evt.currentTarget as IntegerFieldElement;\n            this.edit({ current_balance: parseInt(field.value) });\n          }}\n        >\n        </vaadin-integer-field>\n\n        ${this.renderTemplateOrSlot('current-balance:after')}\n      </div>\n    `;\n  }\n\n  private __renderImport() {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('import:before')}\n\n        <vaadin-button\n          class=\"w-full mb-xs\"\n          theme=\"primary success\"\n          ?disabled=${!isValid || !this.in('idle') || this.disabledSelector.matches('import', true)}\n          @click=${this.submit}\n        >\n          <foxy-i18n ns=${this.ns} key=\"import\" lang=${this.lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('import:after')}\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -1,3 +1,4 @@
+import '@vaadin/vaadin-text-field/vaadin-integer-field';
 import '@vaadin/vaadin-button';
 import '@polymer/iron-icons';
 import '@polymer/iron-icon';

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

@@ -1,3 +1,4 @@
+import '@vaadin/vaadin-text-field/vaadin-integer-field';
 import '@vaadin/vaadin-button';
 import '@polymer/iron-icons';
 import '@polymer/iron-icon';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/GiftCardCodesForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,iBAAiB,EAAE,+BAA4B;AACxD,OAAO,EAAE,iCAAiC,EAAE,wDAAqD;AAEjG,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,iBAAiB,CAAC,CAAC;AACtE,cAAc,CAAC,MAAM,CACnB,8CAA8C,EAC9C,iCAAiC,CAClC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\nimport '@polymer/iron-icons';\nimport '@polymer/iron-icon';\nimport '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { GiftCardCodesForm } from './GiftCardCodesForm';\nimport { InternalGiftCardCodesFormListItem } from './internal/InternalGiftCardCodesFormListItem';\n\ncustomElements.define('foxy-gift-card-codes-form', GiftCardCodesForm);\ncustomElements.define(\n  'foxy-internal-gift-card-codes-form-list-item',\n  InternalGiftCardCodesFormListItem\n);\n\nexport { GiftCardCodesForm };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/GiftCardCodesForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,gDAAgD,CAAC;AACxD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,iBAAiB,EAAE,+BAA4B;AACxD,OAAO,EAAE,iCAAiC,EAAE,wDAAqD;AAEjG,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,iBAAiB,CAAC,CAAC;AACtE,cAAc,CAAC,MAAM,CACnB,8CAA8C,EAC9C,iCAAiC,CAClC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport '@vaadin/vaadin-button';\nimport '@polymer/iron-icons';\nimport '@polymer/iron-icon';\nimport '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { GiftCardCodesForm } from './GiftCardCodesForm';\nimport { InternalGiftCardCodesFormListItem } from './internal/InternalGiftCardCodesFormListItem';\n\ncustomElements.define('foxy-gift-card-codes-form', GiftCardCodesForm);\ncustomElements.define(\n  'foxy-internal-gift-card-codes-form-list-item',\n  InternalGiftCardCodesFormListItem\n);\n\nexport { GiftCardCodesForm };\n"]}

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

@@ -1,12 +1,13 @@
 import { GiftCardCodesForm } from './GiftCardCodesForm';
+import { Rels } from '@foxy.io/sdk/backend';
 import { Renderer } from '../../../mixins/configurable';
-export declare type Data = {
+import { Resource } from '@foxy.io/sdk/core';
+export declare type Data = Resource<Rels.GiftCardCodesImport> & {
     _links: {
         self: {
             href: string;
         };
     };
-    gift_card_codes: string[];
 };
 export declare type Templates = {
     'codes:before'?: Renderer<GiftCardCodesForm>;

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/GiftCardCodesForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { GiftCardCodesForm } from './GiftCardCodesForm';\nimport { Renderer } from '../../../mixins/configurable';\n\nexport type Data = {\n  _links: { self: { href: string } };\n  gift_card_codes: string[];\n};\n\nexport type Templates = {\n  'codes:before'?: Renderer<GiftCardCodesForm>;\n  'codes:after'?: Renderer<GiftCardCodesForm>;\n  'import:before'?: Renderer<GiftCardCodesForm>;\n  'import:after'?: Renderer<GiftCardCodesForm>;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/GiftCardCodesForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { GiftCardCodesForm } from './GiftCardCodesForm';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Renderer } from '../../../mixins/configurable';\nimport { Resource } from '@foxy.io/sdk/core';\n\nexport type Data = Resource<Rels.GiftCardCodesImport> & { _links: { self: { href: string } } };\n\nexport type Templates = {\n  'codes:before'?: Renderer<GiftCardCodesForm>;\n  'codes:after'?: Renderer<GiftCardCodesForm>;\n  'import:before'?: Renderer<GiftCardCodesForm>;\n  'import:after'?: Renderer<GiftCardCodesForm>;\n};\n"]}

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

@@ -1,8 +1,8 @@
-import { ScopedElementsMap } from '@open-wc/scoped-elements';
+import { Data } from './types';
 import { PropertyDeclarations, TemplateResult } from 'lit-element';
+import { ScopedElementsMap } from '@open-wc/scoped-elements';
 import { NucleonElement } from '../NucleonElement/NucleonElement';
 import { NucleonV8N } from '../NucleonElement/types';
-import { Data } from './types';
 declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
 } & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & {
@@ -48,6 +48,7 @@ export declare class GiftCardForm extends Base<Data> {
     private __codesTableColumns;
     private static readonly __codesQueryOptions;
     private __codesTableQuery;
+    private __currencyDisplay;
     private __itemCategories;
     render(): TemplateResult;
     protected _sendGet(): Promise<Data>;

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

@@ -1,19 +1,19 @@
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { Type } from "../QueryBuilder/types.js";
 import { html } from 'lit-element';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { CategoryRestrictionsPage } from "./private/CategoryRestrictionsPage.js";
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { EditableList } from "../../private/EditableList/EditableList.js";
+import { FrequencyInput } from "../../private/FrequencyInput/FrequencyInput.js";
+import { Group } from "../../private/Group/Group.js";
+import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import { PropertyTable } from "../../private/PropertyTable/PropertyTable.js";
 import { ResponsiveMixin } from "../../../mixins/responsive.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { classMap } from "../../../utils/class-map.js";
-import { FrequencyInput } from "../../private/FrequencyInput/FrequencyInput.js";
-import { EditableList } from "../../private/EditableList/EditableList.js";
-import { Group } from "../../private/Group/Group.js";
-import { PropertyTable } from "../../private/PropertyTable/PropertyTable.js";
-import { NucleonElement } from "../NucleonElement/NucleonElement.js";
-import { Type } from "../QueryBuilder/types.js";
 import { currencies } from "./currencies.js";
-import { CategoryRestrictionsPage } from "./private/CategoryRestrictionsPage.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
 const NS = 'gift-card-form';
 const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(ResponsiveMixin(TranslatableMixin(NucleonElement, NS)))));
 /**
@@ -85,10 +85,10 @@ export class GiftCardForm extends Base {
             },
             {
                 hideBelow: 'sm',
-                header: c => html `<foxy-i18n lang=${c.lang} key="date_modified" ns=${c.ns}></foxy-i18n>`,
+                header: c => html `<foxy-i18n lang=${c.lang} key="end_date" ns=${c.ns}></foxy-i18n>`,
                 cell: ctx => html `
         <foxy-i18n
-          options=${JSON.stringify({ value: ctx.data.date_modified })}
+          options=${JSON.stringify({ value: ctx.data.end_date })}
           class="text-tertiary"
           lang=${ctx.lang}
           key="date"
@@ -98,11 +98,26 @@ export class GiftCardForm extends Base {
       `,
             },
             {
-                header: c => html `<foxy-i18n lang=${c.lang} key="used_codes" ns=${c.ns}></foxy-i18n>`,
-                cell: ctx => html `${ctx.data.current_balance}`,
+                header: c => html `<foxy-i18n lang=${c.lang} key="current_balance" ns=${c.ns}></foxy-i18n>`,
+                cell: ctx => {
+                    var _a;
+                    return html `
+        <foxy-i18n
+          options=${JSON.stringify({
+                        amount: `${ctx.data.current_balance} ${(_a = this.data) === null || _a === void 0 ? void 0 : _a.currency_code}`,
+                        currencyDisplay: this.__currencyDisplay,
+                    })}
+          lang=${ctx.lang}
+          key="price"
+          ns=${ctx.ns}
+        >
+        </foxy-i18n>
+      `;
+                },
             },
         ];
         this.__codesTableQuery = null;
+        this.__currencyDisplay = '';
         this.__itemCategories = '';
     }
     static get scopedElements() {
@@ -189,6 +204,7 @@ export class GiftCardForm extends Base {
         const store = await super._fetch(giftCard._links['fx:store'].href);
         const categoriesURL = new URL(store._links['fx:item_categories'].href);
         categoriesURL.searchParams.set('limit', '5');
+        this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';
         this.__itemCategories = categoriesURL.toString();
         return giftCard;
     }