@foxy.io/elements 1.27.0-beta.3 → 1.27.0-beta.4

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

@@ -1,25 +1,20 @@
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
-import { html } from 'lit-html';
-import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { EditableList } from "../../private/EditableList/EditableList.js";
-import { Group } from "../../private/Group/Group.js";
-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 { BooleanSelector } from '@foxy.io/sdk/core';
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { html } from 'lit-html';
 const NS = 'gift-card-codes-form';
-const Base = ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(TranslatableMixin(NucleonElement, NS))));
+const Base = TranslatableMixin(InternalForm, NS);
 /**
  * Form element for importing gift card codes (`fx:gift_card_codes`).
  *
- * @slot codes:before
- * @slot codes:after
+ * @slot gift-card-codes:before - **new in v1.27.0**
+ * @slot gift-card-codes:after - **new in v1.27.0**
  *
- * @slot current-balance:before
- * @slot current-balance:after
+ * @slot current-balance:before - **new in v1.27.0**
+ * @slot current-balance:after - **new in v1.27.0**
  *
- * @slot import:before
- * @slot import:after
+ * @slot create:before - **new in v1.27.0**
+ * @slot create:after - **new in v1.27.0**
  *
  * @element foxy-gift-card-codes-form
  * @since 1.15.0
@@ -28,241 +23,51 @@ export class GiftCardCodesForm extends Base {
     constructor() {
         super(...arguments);
         this.templates = {};
-    }
-    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'),
-            'foxy-spinner': customElements.get('foxy-spinner'),
-            'foxy-i18n': customElements.get('foxy-i18n'),
-            'x-editable-list': EditableList,
-            'x-group': Group,
+        this.__giftCardCodesGetValue = () => {
+            var _a, _b;
+            return (_b = (_a = this.form.gift_card_codes) === null || _a === void 0 ? void 0 : _a.map(value => ({ value }))) !== null && _b !== void 0 ? _b : [];
+        };
+        this.__giftCardCodesSetValue = (newValue) => {
+            this.edit({
+                gift_card_codes: newValue
+                    .map(({ value }) => value.split(' ').map(v => v.trim()))
+                    .flat()
+                    .filter((v, i, a) => a.indexOf(v) === i),
+            });
         };
     }
     static get v8n() {
-        return [
-            ({ gift_card_codes: v }) => (v && v.length > 0) || 'gift_card_codes_required',
-            ({ current_balance: v }) => !v || v >= 0 || 'current_balance_negative',
-        ];
+        return [({ gift_card_codes: v }) => (v && v.length > 0) || 'gift-card-codes:v8n_required'];
     }
-    render() {
-        var _a, _b;
-        const { hiddenSelector, lang, ns } = this;
-        const isBusy = this.in('busy');
-        const isFail = this.in('fail');
-        const isSnapshot = this.in({ idle: 'snapshot' });
-        const isTemplate = this.in({ idle: 'template' });
-        const transition = 'transition-opacity duration-500';
-        const hidden = 'opacity-0 pointer-events-none';
-        return html `
-      <div class="relative">
-        <div
-          class=${classMap({
-            'relative space-y-m': true,
-            [transition]: true,
-            [hidden]: isSnapshot,
-        })}
-        >
-          ${hiddenSelector.matches('codes', true) ? '' : this.__renderCodes()}
-          ${hiddenSelector.matches('current-balance', true) ? '' : this.__renderCurrentBalance()}
-          ${hiddenSelector.matches('import', true) ? '' : this.__renderImport()}
-        </div>
-
-        <div
-          class=${classMap({
-            'absolute inset-0 flex flex-col items-center justify-center': true,
-            'text-center text-m text-secondary leading-m': true,
-            [transition]: true,
-            [hidden]: !isSnapshot,
-        })}
-        >
-          <div class="mx-auto flex mb-m w-l h-l rounded-t-l rounded-b-l bg-success">
-            <iron-icon icon="icons:done-all" class="m-auto text-success-contrast"></iron-icon>
-          </div>
-
-          <foxy-i18n class="block" lang=${lang} key="import_codes_done" ns=${ns}></foxy-i18n>
-        </div>
-
-        <div
-          data-testid="spinner"
-          class=${classMap({
-            'absolute inset-0 flex': true,
-            [transition]: true,
-            [hidden]: !isBusy && !isFail,
-        })}
-        >
-          <foxy-spinner
-            layout="vertical"
-            class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l"
-            state=${isFail ? 'error' : isTemplate ? 'empty' : 'busy'}
-            lang=${lang}
-            ns="${ns} ${(_b = (_a = customElements.get('foxy-spinner')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
-          >
-          </foxy-spinner>
-        </div>
-      </div>
-    `;
+    get readonlySelector() {
+        const alwaysMatch = [super.readonlySelector.toString()];
+        if (this.href)
+            alwaysMatch.push('gift-card-codes');
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
     }
-    __getErrorMessage(prefix) {
-        const error = this.errors.find(err => err.startsWith(prefix));
-        return error ? this.t(error.replace(prefix, 'v8n')) : '';
+    get hiddenSelector() {
+        const alwaysMatch = ['delete timestamps', super.hiddenSelector.toString()];
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
     }
-    __getValidator(prefix) {
-        return () => !this.errors.some(err => err.startsWith(prefix));
-    }
-    __renderCodes() {
-        var _a;
-        const maxVisible = 16;
-        const codes = (_a = this.form.gift_card_codes) !== null && _a !== void 0 ? _a : [];
-        const visibleCodes = codes.length > maxVisible ? codes.slice(-maxVisible) : codes;
-        const hiddenCodes = codes.length > maxVisible ? codes.slice(0, -maxVisible) : [];
-        const parse = (value) => {
-            return value
-                .split(/\s/)
-                .map(code => code.trim())
-                .filter(code => code.length > 0);
-        };
-        const items = visibleCodes.map(code => {
-            let href;
-            try {
-                const url = new URL(this.parent);
-                url.searchParams.set('code', code);
-                href = url.toString();
-            }
-            catch (_a) {
-                href = this.parent;
-            }
-            return {
-                value: code,
-                label: html `
-          <foxy-internal-gift-card-codes-form-list-item
-            group=${this.group}
-            href=${href}
-            lang=${this.lang}
-            ns=${this.ns}
-          >
-          </foxy-internal-gift-card-codes-form-list-item>
-        `,
-            };
-        });
+    renderBody() {
         return html `
-      <div data-testid="codes">
-        ${this.renderTemplateOrSlot('codes:before')}
+      <foxy-internal-editable-list-control
+        infer="gift-card-codes"
+        .getValue=${this.__giftCardCodesGetValue}
+        .setValue=${this.__giftCardCodesSetValue}
+      >
+      </foxy-internal-editable-list-control>
 
-        <x-group class="mb-xs" frame>
-          <foxy-i18n slot="header" lang=${this.lang} key="code_plural" ns=${this.ns}></foxy-i18n>
+      <foxy-internal-number-control infer="current-balance" min="0"></foxy-internal-number-control>
 
-          <x-editable-list
-            data-testid="codes:list"
-            lang=${this.lang}
-            ns=${this.ns}
-            ?disabled=${!this.in('idle') || this.disabledSelector.matches('codes', true)}
-            ?readonly=${this.readonlySelector.matches('codes', true)}
-            .items=${items}
-            @change=${(evt) => {
-            const list = evt.currentTarget;
-            const codes = list.items.reduce((p, c) => [...p, ...parse(c.value)], []);
-            const newCodes = new Set([...hiddenCodes, ...codes]);
-            this.edit({ gift_card_codes: [...newCodes] });
-        }}
-            @paste=${(evt) => {
-            var _a, _b;
-            evt.preventDefault();
-            const text = (_b = (_a = evt.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
-            const pastedCodes = parse(text);
-            this.edit({ gift_card_codes: Array.from(new Set([...codes, ...pastedCodes])) });
-        }}
-          >
-            <div
-              class="ml-m py-s border-b border-contrast-10 font-lumo"
-              ?hidden=${hiddenCodes.length === 0}
-            >
-              <foxy-i18n
-                options=${JSON.stringify({ count: hiddenCodes.length })}
-                class="block text-body text-m mb-xs"
-                lang=${this.lang}
-                key="hidden_codes_header"
-                ns=${this.ns}
-              >
-              </foxy-i18n>
-
-              <foxy-i18n
-                class="block text-xs text-tertiary"
-                lang=${this.lang}
-                key="hidden_codes_explainer"
-                ns=${this.ns}
-              >
-              </foxy-i18n>
-            </div>
-          </x-editable-list>
-        </x-group>
-
-        <foxy-i18n
-          class="block text-xs text-tertiary leading-s"
-          lang=${this.lang}
-          key="code_import_hint"
-          ns=${this.ns}
-        >
-        </foxy-i18n>
-
-        ${this.renderTemplateOrSlot('codes:after')}
-      </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')}
-          data-testid="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 : ''}
-          @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
-          @change=${(evt) => {
-            const field = evt.currentTarget;
-            this.edit({ current_balance: parseInt(field.value) });
-        }}
-        >
-        </vaadin-integer-field>
-
-        ${this.renderTemplateOrSlot('current-balance:after')}
-      </div>
+      ${super.renderBody()}
     `;
     }
-    __renderImport() {
-        const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });
-        const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });
-        const isValid = isTemplateValid || isSnapshotValid;
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('import:before')}
-
-        <vaadin-button
-          data-testid="import"
-          class="w-full mb-xs"
-          theme="primary success"
-          ?disabled=${!isValid || !this.in('idle') || this.disabledSelector.matches('import', true)}
-          @click=${() => this.submit()}
-        >
-          <foxy-i18n ns=${this.ns} key="import" lang=${this.lang}></foxy-i18n>
-        </vaadin-button>
-
-        ${this.renderTemplateOrSlot('import:after')}
-      </div>
-    `;
+    async _sendPost(edits) {
+        const body = JSON.stringify(edits);
+        const data = await this._fetch(this.parent, { body, method: 'POST' });
+        this.status = { key: 'success' };
+        return data;
     }
 }
 //# sourceMappingURL=GiftCardCodesForm.js.map

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 { 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          data-testid=\"spinner\"\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    const parse = (value: string) => {\n      return value\n        .split(/\\s/)\n        .map(code => code.trim())\n        .filter(code => code.length > 0);\n    };\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 data-testid=\"codes\">\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            data-testid=\"codes: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 codes = list.items.reduce<string[]>((p, c) => [...p, ...parse(c.value)], []);\n              const newCodes = new Set([...hiddenCodes, ...codes]);\n              this.edit({ gift_card_codes: [...newCodes] });\n            }}\n            @paste=${(evt: ClipboardEvent) => {\n              evt.preventDefault();\n              const text = evt.clipboardData?.getData('text') ?? '';\n              const pastedCodes = parse(text);\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          data-testid=\"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          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\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          data-testid=\"import\"\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":"AAKA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,sBAAsB,CAAC;AAClC,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD;;;;;;;;;;;;;;GAcG;AACH,MAAM,OAAO,iBAAkB,SAAQ,IAAU;IAAjD;;QAKE,cAAS,GAAc,EAAE,CAAC;QAET,4BAAuB,GAAG,GAAG,EAAE;;YAC9C,mBAAO,IAAI,CAAC,IAAI,CAAC,eAAe,0CAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,oCAAK,EAAE,CAAC;QACpE,CAAC,CAAC;QAEe,4BAAuB,GAAG,CAAC,QAAgB,EAAE,EAAE;YAC9D,IAAI,CAAC,IAAI,CAAC;gBACR,eAAe,EAAE,QAAQ;qBACtB,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;qBACvD,IAAI,EAAE;qBACN,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;aAC3C,CAAC,CAAC;QACL,CAAC,CAAC;IAkCJ,CAAC;IAnDC,MAAM,KAAK,GAAG;QACZ,OAAO,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,8BAA8B,CAAC,CAAC;IAC7F,CAAC;IAiBD,IAAI,gBAAgB;QAClB,MAAM,WAAW,GAAG,CAAC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxD,IAAI,IAAI,CAAC,IAAI;YAAE,WAAW,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACnD,OAAO,IAAI,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IAC3D,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,WAAW,GAAG,CAAC,mBAAmB,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC3E,OAAO,IAAI,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IAC3D,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAA;;;oBAGK,IAAI,CAAC,uBAAuB;oBAC5B,IAAI,CAAC,uBAAuB;;;;;;QAMxC,KAAK,CAAC,UAAU,EAAE;KACrB,CAAC;IACJ,CAAC;IAES,KAAK,CAAC,SAAS,CAAC,KAAoB;QAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACnC,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;QACtE,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC;QACjC,OAAO,IAAI,CAAC;IACd,CAAC;CACF","sourcesContent":["import type { Data, Templates } from './types';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\nimport type { Item } from '../../internal/InternalEditableListControl/types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { html } from 'lit-html';\n\nconst NS = 'gift-card-codes-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Form element for importing gift card codes (`fx:gift_card_codes`).\n *\n * @slot gift-card-codes:before - **new in v1.27.0**\n * @slot gift-card-codes:after - **new in v1.27.0**\n *\n * @slot current-balance:before - **new in v1.27.0**\n * @slot current-balance:after - **new in v1.27.0**\n *\n * @slot create:before - **new in v1.27.0**\n * @slot create:after - **new in v1.27.0**\n *\n * @element foxy-gift-card-codes-form\n * @since 1.15.0\n */\nexport class GiftCardCodesForm extends Base<Data> {\n  static get v8n(): NucleonV8N<Data> {\n    return [({ gift_card_codes: v }) => (v && v.length > 0) || 'gift-card-codes:v8n_required'];\n  }\n\n  templates: Templates = {};\n\n  private readonly __giftCardCodesGetValue = () => {\n    return this.form.gift_card_codes?.map(value => ({ value })) ?? [];\n  };\n\n  private readonly __giftCardCodesSetValue = (newValue: Item[]) => {\n    this.edit({\n      gift_card_codes: newValue\n        .map(({ value }) => value.split(' ').map(v => v.trim()))\n        .flat()\n        .filter((v, i, a) => a.indexOf(v) === i),\n    });\n  };\n\n  get readonlySelector(): BooleanSelector {\n    const alwaysMatch = [super.readonlySelector.toString()];\n    if (this.href) alwaysMatch.push('gift-card-codes');\n    return new BooleanSelector(alwaysMatch.join(' ').trim());\n  }\n\n  get hiddenSelector(): BooleanSelector {\n    const alwaysMatch = ['delete timestamps', super.hiddenSelector.toString()];\n    return new BooleanSelector(alwaysMatch.join(' ').trim());\n  }\n\n  renderBody(): TemplateResult {\n    return html`\n      <foxy-internal-editable-list-control\n        infer=\"gift-card-codes\"\n        .getValue=${this.__giftCardCodesGetValue}\n        .setValue=${this.__giftCardCodesSetValue}\n      >\n      </foxy-internal-editable-list-control>\n\n      <foxy-internal-number-control infer=\"current-balance\" min=\"0\"></foxy-internal-number-control>\n\n      ${super.renderBody()}\n    `;\n  }\n\n  protected async _sendPost(edits: Partial<Data>): Promise<Data> {\n    const body = JSON.stringify(edits);\n    const data = await this._fetch(this.parent, { body, method: 'POST' });\n    this.status = { key: 'success' };\n    return data;\n  }\n}\n"]}

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

@@ -1,9 +1,5 @@
-import '@vaadin/vaadin-text-field/vaadin-integer-field';
-import '@vaadin/vaadin-button';
-import '@polymer/iron-icons';
-import '@polymer/iron-icon';
-import '../../internal/InternalSandbox/index';
-import '../Spinner/index';
-import '../I18n/index';
+import '../../internal/InternalEditableListControl/index';
+import '../../internal/InternalNumberControl/index';
+import '../../internal/InternalForm/index';
 import { GiftCardCodesForm } from './GiftCardCodesForm';
 export { GiftCardCodesForm };

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

@@ -1,13 +1,7 @@
-import '@vaadin/vaadin-text-field/vaadin-integer-field';
-import '@vaadin/vaadin-button';
-import '@polymer/iron-icons';
-import '@polymer/iron-icon';
-import "../../internal/InternalSandbox/index.js";
-import "../Spinner/index.js";
-import "../I18n/index.js";
+import "../../internal/InternalEditableListControl/index.js";
+import "../../internal/InternalNumberControl/index.js";
+import "../../internal/InternalForm/index.js";
 import { GiftCardCodesForm } from "./GiftCardCodesForm.js";
-import { InternalGiftCardCodesFormListItem } from "./internal/InternalGiftCardCodesFormListItem.js";
 customElements.define('foxy-gift-card-codes-form', GiftCardCodesForm);
-customElements.define('foxy-internal-gift-card-codes-form-list-item', InternalGiftCardCodesFormListItem);
 export { GiftCardCodesForm };
 //# sourceMappingURL=index.js.map

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,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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/GiftCardCodesForm/index.ts"],"names":[],"mappings":"AAAA,6DAA0D;AAC1D,uDAAoD;AACpD,8CAA2C;AAE3C,OAAO,EAAE,iBAAiB,EAAE,+BAA4B;AAExD,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,iBAAiB,CAAC,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import '../../internal/InternalEditableListControl/index';\nimport '../../internal/InternalNumberControl/index';\nimport '../../internal/InternalForm/index';\n\nimport { GiftCardCodesForm } from './GiftCardCodesForm';\n\ncustomElements.define('foxy-gift-card-codes-form', GiftCardCodesForm);\n\nexport { GiftCardCodesForm };\n"]}

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

@@ -10,8 +10,10 @@ export declare type Data = Resource<Rels.GiftCardCodesImport> & {
     };
 };
 export declare type Templates = {
-    'codes:before'?: Renderer<GiftCardCodesForm>;
-    'codes:after'?: Renderer<GiftCardCodesForm>;
-    'import:before'?: Renderer<GiftCardCodesForm>;
-    'import:after'?: Renderer<GiftCardCodesForm>;
+    'gift-card-codes:before'?: Renderer<GiftCardCodesForm>;
+    'gift-card-codes:after'?: Renderer<GiftCardCodesForm>;
+    'current-balance:before'?: Renderer<GiftCardCodesForm>;
+    'current-balance:after'?: Renderer<GiftCardCodesForm>;
+    'create:before'?: Renderer<GiftCardCodesForm>;
+    'create:after'?: 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 { 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"]}
+{"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  'gift-card-codes:before'?: Renderer<GiftCardCodesForm>;\n  'gift-card-codes:after'?: Renderer<GiftCardCodesForm>;\n  'current-balance:before'?: Renderer<GiftCardCodesForm>;\n  'current-balance:after'?: Renderer<GiftCardCodesForm>;\n  'create:before'?: Renderer<GiftCardCodesForm>;\n  'create:after'?: Renderer<GiftCardCodesForm>;\n};\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foxy.io/elements",
   "type": "module",
-  "version": "1.27.0-beta.3",
+  "version": "1.27.0-beta.4",
   "description": "E-commerce web components by Foxy.",
   "repository": {
     "type": "git",

package/dist/cdn/shared-0cf90158.js

@@ -1 +0,0 @@
-import"./shared-db98729a.js";import"./shared-4482e7b9.js";import"./shared-44bb85d8.js";import{I as e}from"./shared-2062c274.js";import{_ as i}from"./shared-1522d76f.js";import{i as r}from"./shared-9803aa7c.js";import{h as s}from"./shared-dc73b9a5.js";let t,l,a,n=e=>e;customElements.define("foxy-internal-integer-control",class extends e{constructor(){super(...arguments),this.prefix=null,this.suffix=null,this.min=null,this.max=null}static get properties(){return i(i({},super.properties),{},{prefix:{},suffix:{},min:{type:Number},max:{type:Number}})}renderControl(){var e,i;return s(t||(t=n` <vaadin-integer-field error-message="${0}" placeholder="${0}" helper-text="${0}" label="${0}" class="w-full" min="${0}" max="${0}" ?disabled="${0}" ?readonly="${0}" .checkValidity="${0}" .value="${0}" clear-button-visible @keydown="${0}" @change="${0}"> ${0} ${0} </vaadin-integer-field> `),r(this._errorMessage),this.placeholder,this.helperText,this.label,r(null!==(e=this.min)&&void 0!==e?e:void 0),r(null!==(i=this.max)&&void 0!==i?i:void 0),this.disabled,this.readonly,this._checkValidity,String(this._value),(e=>{var i;return"Enter"===e.key&&(null===(i=this.nucleon)||void 0===i?void 0:i.submit())}),(e=>{const i=e.currentTarget;this._value=parseInt(i.value)}),this.prefix?s(l||(l=n`<div slot="prefix">${0}</div>`),this.prefix):"",this.suffix?s(a||(a=n`<div class="pr-s font-medium" slot="suffix">${0}</div>`),this.suffix):"")}get _value(){var e;return null!==(e=super._value)&&void 0!==e?e:0}set _value(e){super._value=e}});

package/dist/cdn/shared-f53d078e.js

@@ -1 +0,0 @@
-import"./shared-db98729a.js";import"./shared-4482e7b9.js";import{I as e}from"./shared-2062c274.js";import{_ as i}from"./shared-1522d76f.js";import{i as r}from"./shared-9803aa7c.js";import{h as s}from"./shared-dc73b9a5.js";let t,l,a,n=e=>e;customElements.define("foxy-internal-number-control",class extends e{constructor(){super(...arguments),this.prefix=null,this.suffix=null,this.min=null,this.max=null}static get properties(){return i(i({},super.properties),{},{prefix:{},suffix:{},min:{type:Number},max:{type:Number}})}renderControl(){var e,i;return s(t||(t=n` <vaadin-number-field error-message="${0}" placeholder="${0}" helper-text="${0}" label="${0}" class="w-full" min="${0}" max="${0}" ?disabled="${0}" ?readonly="${0}" .checkValidity="${0}" .value="${0}" clear-button-visible @keydown="${0}" @change="${0}"> ${0} ${0} </vaadin-number-field> `),r(this._errorMessage),this.placeholder,this.helperText,this.label,r(null!==(e=this.min)&&void 0!==e?e:void 0),r(null!==(i=this.max)&&void 0!==i?i:void 0),this.disabled,this.readonly,this._checkValidity,String(this._value),(e=>{var i;return"Enter"===e.key&&(null===(i=this.nucleon)||void 0===i?void 0:i.submit())}),(e=>{const i=e.currentTarget;this._value=parseFloat(i.value)}),this.prefix?s(l||(l=n`<div slot="prefix">${0}</div>`),this.prefix):"",this.suffix?s(a||(a=n`<div class="pr-s font-medium" slot="suffix">${0}</div>`),this.suffix):"")}get _value(){var e;return null!==(e=super._value)&&void 0!==e?e:0}set _value(e){super._value=e}});

package/dist/elements/public/CouponCodesForm/internal/InternalCouponCodesFormListItem.d.ts

@@ -1,14 +0,0 @@
-import { TemplateResult } from 'lit-html';
-import { NucleonElement } from '../../NucleonElement/NucleonElement';
-import { Rels } from '@foxy.io/sdk/backend';
-import { Resource } from '@foxy.io/sdk/core';
-declare type Data = Resource<Rels.CouponCodes>;
-declare const Base: typeof NucleonElement & {
-    styles: import("lit-element").CSSResultArray;
-} & import("lit-element").Constructor<import("../../../../mixins/translatable").TranslatableMixinHost> & {
-    defaultNS: string;
-};
-export declare class InternalCouponCodesFormListItem extends Base<Data> {
-    render(): TemplateResult;
-}
-export {};

package/dist/elements/public/CouponCodesForm/internal/InternalCouponCodesFormListItem.js

@@ -1,48 +0,0 @@
-import { html } from 'lit-html';
-import { NucleonElement } from "../../NucleonElement/NucleonElement.js";
-import { ThemeableMixin } from "../../../../mixins/themeable.js";
-import { TranslatableMixin } from "../../../../mixins/translatable.js";
-const Base = TranslatableMixin(ThemeableMixin(NucleonElement));
-export class InternalCouponCodesFormListItem extends Base {
-    render() {
-        var _a, _b;
-        let code;
-        try {
-            code = (_a = new URL(this.href).searchParams.get('code')) !== null && _a !== void 0 ? _a : '';
-        }
-        catch (_c) {
-            return html ``;
-        }
-        let statusClass = 'text-tertiary bg-contrast-5';
-        let statusKey;
-        let codeClass = 'text-body';
-        if (this.in('fail')) {
-            statusKey = 'loading_error';
-        }
-        else if (this.in('busy')) {
-            statusKey = 'loading_busy';
-        }
-        else if (((_b = this.data) === null || _b === void 0 ? void 0 : _b.returned_items) === 0) {
-            statusClass = 'text-success bg-success-10';
-            statusKey = 'unique';
-        }
-        else {
-            statusClass = 'text-error bg-error-10';
-            statusKey = 'duplicate';
-            codeClass = 'text-error';
-        }
-        return html `
-      <div class="flex justify-between items-center font-lumo leading-m">
-        <div class="text-m ${codeClass}">${code}</div>
-        <foxy-i18n
-          class="text-xs font-medium px-xs rounded ${statusClass}"
-          lang=${this.lang}
-          key=${statusKey}
-          ns=${this.ns}
-        >
-        </foxy-i18n>
-      </div>
-    `;
-    }
-}
-//# sourceMappingURL=InternalCouponCodesFormListItem.js.map

package/dist/elements/public/CouponCodesForm/internal/InternalCouponCodesFormListItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InternalCouponCodesFormListItem.js","sourceRoot":"","sources":["../../../../../src/elements/public/CouponCodesForm/internal/InternalCouponCodesFormListItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,cAAc,EAAE,+CAA4C;AAGrE,OAAO,EAAE,cAAc,EAAE,wCAAqC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,2CAAwC;AAGpE,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAE/D,MAAM,OAAO,+BAAgC,SAAQ,IAAU;IAC7D,MAAM;;QACJ,IAAI,IAAY,CAAC;QAEjB,IAAI;YACF,IAAI,SAAG,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,mCAAI,EAAE,CAAC;SAC1D;QAAC,WAAM;YACN,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,IAAI,WAAW,GAAG,6BAA6B,CAAC;QAChD,IAAI,SAAiB,CAAC;QACtB,IAAI,SAAS,GAAG,WAAW,CAAC;QAE5B,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;YACnB,SAAS,GAAG,eAAe,CAAC;SAC7B;aAAM,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;YAC1B,SAAS,GAAG,cAAc,CAAC;SAC5B;aAAM,IAAI,OAAA,IAAI,CAAC,IAAI,0CAAE,cAAc,MAAK,CAAC,EAAE;YAC1C,WAAW,GAAG,4BAA4B,CAAC;YAC3C,SAAS,GAAG,QAAQ,CAAC;SACtB;aAAM;YACL,WAAW,GAAG,wBAAwB,CAAC;YACvC,SAAS,GAAG,WAAW,CAAC;YACxB,SAAS,GAAG,YAAY,CAAC;SAC1B;QAED,OAAO,IAAI,CAAA;;6BAEc,SAAS,KAAK,IAAI;;qDAEM,WAAW;iBAC/C,IAAI,CAAC,IAAI;gBACV,SAAS;eACV,IAAI,CAAC,EAAE;;;;KAIjB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { NucleonElement } from '../../NucleonElement/NucleonElement';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../../mixins/translatable';\n\ntype Data = Resource<Rels.CouponCodes>;\nconst Base = TranslatableMixin(ThemeableMixin(NucleonElement));\n\nexport class InternalCouponCodesFormListItem extends Base<Data> {\n  render(): TemplateResult {\n    let code: string;\n\n    try {\n      code = new URL(this.href).searchParams.get('code') ?? '';\n    } catch {\n      return html``;\n    }\n\n    let statusClass = 'text-tertiary bg-contrast-5';\n    let statusKey: string;\n    let codeClass = 'text-body';\n\n    if (this.in('fail')) {\n      statusKey = 'loading_error';\n    } else if (this.in('busy')) {\n      statusKey = 'loading_busy';\n    } else if (this.data?.returned_items === 0) {\n      statusClass = 'text-success bg-success-10';\n      statusKey = 'unique';\n    } else {\n      statusClass = 'text-error bg-error-10';\n      statusKey = 'duplicate';\n      codeClass = 'text-error';\n    }\n\n    return html`\n      <div class=\"flex justify-between items-center font-lumo leading-m\">\n        <div class=\"text-m ${codeClass}\">${code}</div>\n        <foxy-i18n\n          class=\"text-xs font-medium px-xs rounded ${statusClass}\"\n          lang=${this.lang}\n          key=${statusKey}\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -1,19 +0,0 @@
-import { TemplateResult } from 'lit-html';
-import { NucleonElement } from '../../NucleonElement/NucleonElement';
-declare type Data = {
-    _links: {
-        self: {
-            href: string;
-        };
-    };
-    returned_items: number;
-};
-declare const Base: typeof NucleonElement & {
-    styles: import("lit-element").CSSResultArray;
-} & import("lit-element").Constructor<import("../../../../mixins/translatable").TranslatableMixinHost> & {
-    defaultNS: string;
-};
-export declare class InternalGiftCardCodesFormListItem extends Base<Data> {
-    render(): TemplateResult;
-}
-export {};

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

@@ -1,48 +0,0 @@
-import { html } from 'lit-html';
-import { ThemeableMixin } from "../../../../mixins/themeable.js";
-import { TranslatableMixin } from "../../../../mixins/translatable.js";
-import { NucleonElement } from "../../NucleonElement/NucleonElement.js";
-const Base = TranslatableMixin(ThemeableMixin(NucleonElement));
-export class InternalGiftCardCodesFormListItem extends Base {
-    render() {
-        var _a, _b;
-        let code;
-        try {
-            code = (_a = new URL(this.href).searchParams.get('code')) !== null && _a !== void 0 ? _a : '';
-        }
-        catch (_c) {
-            return html ``;
-        }
-        let statusClass = 'text-tertiary bg-contrast-5';
-        let statusKey;
-        let codeClass = 'text-body';
-        if (this.in('fail')) {
-            statusKey = 'loading_error';
-        }
-        else if (this.in('busy')) {
-            statusKey = 'loading_busy';
-        }
-        else if (((_b = this.data) === null || _b === void 0 ? void 0 : _b.returned_items) === 0) {
-            statusClass = 'text-success bg-success-10';
-            statusKey = 'unique';
-        }
-        else {
-            statusClass = 'text-error bg-error-10';
-            statusKey = 'duplicate';
-            codeClass = 'text-error';
-        }
-        return html `
-      <div class="flex justify-between items-center font-lumo leading-m">
-        <div class="text-m ${codeClass}">${code}</div>
-        <foxy-i18n
-          class="text-xs font-medium px-xs rounded ${statusClass}"
-          lang=${this.lang}
-          key=${statusKey}
-          ns=${this.ns}
-        >
-        </foxy-i18n>
-      </div>
-    `;
-    }
-}
-//# sourceMappingURL=InternalGiftCardCodesFormListItem.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"InternalGiftCardCodesFormListItem.js","sourceRoot":"","sources":["../../../../../src/elements/public/GiftCardCodesForm/internal/InternalGiftCardCodesFormListItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,wCAAqC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,2CAAwC;AACpE,OAAO,EAAE,cAAc,EAAE,+CAA4C;AAGrE,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAE/D,MAAM,OAAO,iCAAkC,SAAQ,IAAU;IAC/D,MAAM;;QACJ,IAAI,IAAY,CAAC;QAEjB,IAAI;YACF,IAAI,SAAG,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,mCAAI,EAAE,CAAC;SAC1D;QAAC,WAAM;YACN,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,IAAI,WAAW,GAAG,6BAA6B,CAAC;QAChD,IAAI,SAAiB,CAAC;QACtB,IAAI,SAAS,GAAG,WAAW,CAAC;QAE5B,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;YACnB,SAAS,GAAG,eAAe,CAAC;SAC7B;aAAM,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;YAC1B,SAAS,GAAG,cAAc,CAAC;SAC5B;aAAM,IAAI,OAAA,IAAI,CAAC,IAAI,0CAAE,cAAc,MAAK,CAAC,EAAE;YAC1C,WAAW,GAAG,4BAA4B,CAAC;YAC3C,SAAS,GAAG,QAAQ,CAAC;SACtB;aAAM;YACL,WAAW,GAAG,wBAAwB,CAAC;YACvC,SAAS,GAAG,WAAW,CAAC;YACxB,SAAS,GAAG,YAAY,CAAC;SAC1B;QAED,OAAO,IAAI,CAAA;;6BAEc,SAAS,KAAK,IAAI;;qDAEM,WAAW;iBAC/C,IAAI,CAAC,IAAI;gBACV,SAAS;eACV,IAAI,CAAC,EAAE;;;;KAIjB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { html, TemplateResult } from 'lit-html';\nimport { ThemeableMixin } from '../../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../../mixins/translatable';\nimport { NucleonElement } from '../../NucleonElement/NucleonElement';\n\ntype Data = { _links: { self: { href: string } }; returned_items: number };\nconst Base = TranslatableMixin(ThemeableMixin(NucleonElement));\n\nexport class InternalGiftCardCodesFormListItem extends Base<Data> {\n  render(): TemplateResult {\n    let code: string;\n\n    try {\n      code = new URL(this.href).searchParams.get('code') ?? '';\n    } catch {\n      return html``;\n    }\n\n    let statusClass = 'text-tertiary bg-contrast-5';\n    let statusKey: string;\n    let codeClass = 'text-body';\n\n    if (this.in('fail')) {\n      statusKey = 'loading_error';\n    } else if (this.in('busy')) {\n      statusKey = 'loading_busy';\n    } else if (this.data?.returned_items === 0) {\n      statusClass = 'text-success bg-success-10';\n      statusKey = 'unique';\n    } else {\n      statusClass = 'text-error bg-error-10';\n      statusKey = 'duplicate';\n      codeClass = 'text-error';\n    }\n\n    return html`\n      <div class=\"flex justify-between items-center font-lumo leading-m\">\n        <div class=\"text-m ${codeClass}\">${code}</div>\n        <foxy-i18n\n          class=\"text-xs font-medium px-xs rounded ${statusClass}\"\n          lang=${this.lang}\n          key=${statusKey}\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n      </div>\n    `;\n  }\n}\n"]}