@foxy.io/elements 1.27.0-beta.5 → 1.27.0-beta.7

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

@@ -1,21 +1,13 @@
 import { Type } from "../QueryBuilder/types.js";
 import { html } from 'lit-element';
-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 { Metadata } from "../../private/Metadata/Metadata.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 { ResponsiveMixin } from "../../../mixins/responsive.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
 import { currencies } from "./currencies.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
 const NS = 'gift-card-form';
-const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(ResponsiveMixin(TranslatableMixin(NucleonElement, NS)))));
+const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
 /**
  * Form element for creating or editing gift cards (`fx:gift_card`).
  *
@@ -37,6 +29,9 @@ const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(ResponsiveMixi
  * @slot category-restrictions:before
  * @slot category-restrictions:after
  *
+ * @slot attributes:before - **new in v1.27.0**
+ * @slot attributes:after - **new in v1.27.0**
+ *
  * @slot timestamps:before
  * @slot timestamps:after
  *
@@ -52,121 +47,75 @@ const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(ResponsiveMixi
 export class GiftCardForm extends Base {
     constructor() {
         super(...arguments);
-        this.__codesTableColumns = [
-            {
-                header: ctx => html `<foxy-i18n lang=${ctx.lang} key="code" ns=${ctx.ns}></foxy-i18n>`,
-                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>`,
-                cell: ctx => html `
-        <foxy-i18n
-          options=${JSON.stringify({ value: ctx.data.date_created })}
-          class="text-tertiary"
-          lang=${ctx.lang}
-          key="date"
-          ns=${ctx.ns}
-        >
-        </foxy-i18n>
-      `,
-            },
-            {
-                hideBelow: 'sm',
-                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.end_date })}
-          class="text-tertiary"
-          lang=${ctx.lang}
-          key="date"
-          ns=${ctx.ns}
-        >
-        </foxy-i18n>
-      `,
-            },
+        /** Returns a `fx:customer` Resource URL for a Customer ID. */
+        this.getCustomerHref = id => {
+            return `https://api.foxycart.com/customers/${id}`;
+        };
+        this.__productCodeRestrictionsGetValue = () => {
+            var _a;
+            return (_a = this.form.product_code_restrictions) === null || _a === void 0 ? void 0 : _a.split(',').filter(v => !!v.trim()).map(value => ({
+                value,
+                label: value.startsWith('-')
+                    ? this.t(`product-code-restrictions.label_block`, { value: value.substring(1) })
+                    : this.t(`product-code-restrictions.label_allow`, { value }),
+            }));
+        };
+        this.__productCodeRestrictionsSetValue = (newValue) => {
+            this.edit({
+                product_code_restrictions: newValue
+                    .map(({ value, unit }) => (unit === 'block' ? `-${value}` : value))
+                    .filter((v, i, a) => !!v && a.indexOf(v) === i)
+                    .join(','),
+            });
+        };
+        this.__currencyCodeGetValue = () => {
+            var _a;
+            return (_a = this.form.currency_code) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        };
+        this.__storeLoaderId = 'storeLoader';
+        this.__codesFilters = [
+            { label: 'code', path: 'code', type: Type.String },
+            { label: 'current_balance', path: 'current_balance', type: Type.Number },
+            { label: 'end_date', path: 'end_date', type: Type.Date },
+            { label: 'date_created', path: 'date_created', type: Type.Date },
+            { label: 'date_modified', path: 'date_modified', type: Type.Date },
+        ];
+        this.__codesActions = [
             {
-                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>
-      `;
+                theme: 'contrast',
+                state: 'idle',
+                text: 'copy_button_text',
+                onClick: async (data) => {
+                    this.__codesActions[0].state = 'busy';
+                    this.__codesActions = [...this.__codesActions];
+                    try {
+                        await navigator.clipboard.writeText(data.code);
+                        this.__codesActions[0].state = 'end';
+                    }
+                    catch (_a) {
+                        this.__codesActions[0].state = 'error';
+                    }
+                    finally {
+                        this.__codesActions = [...this.__codesActions];
+                        setTimeout(() => {
+                            this.__codesActions[0].state = 'idle';
+                            this.__codesActions = [...this.__codesActions];
+                        }, 1000);
+                    }
                 },
             },
         ];
-        this.__codesTableQuery = null;
-        this.__currencyDisplay = '';
-        this.__itemCategories = '';
-    }
-    static get scopedElements() {
-        return {
-            'vaadin-text-field': customElements.get('vaadin-text-field'),
-            'vaadin-combo-box': customElements.get('vaadin-combo-box'),
-            'vaadin-button': customElements.get('vaadin-button'),
-            'iron-icon': customElements.get('iron-icon'),
-            'foxy-internal-gift-card-form-provisioning-control': customElements.get('foxy-internal-gift-card-form-provisioning-control'),
-            'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),
-            'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
-            'foxy-query-builder': customElements.get('foxy-query-builder'),
-            'foxy-form-dialog': customElements.get('foxy-form-dialog'),
-            'foxy-pagination': customElements.get('foxy-pagination'),
-            'foxy-spinner': customElements.get('foxy-spinner'),
-            'foxy-table': customElements.get('foxy-table'),
-            'foxy-i18n': customElements.get('foxy-i18n'),
-            'x-category-restrictions-page': CategoryRestrictionsPage,
-            'x-frequency-input': FrequencyInput,
-            'x-metadata': Metadata,
-            'x-editable-list': EditableList,
-            'x-group': Group,
-        };
     }
     static get properties() {
         return {
             ...super.properties,
-            __codesTableQuery: { attribute: false },
-            __itemCategories: { attribute: false },
+            getCustomerHref: { attribute: false },
         };
     }
     static get v8n() {
         return [
-            ({ name: v }) => !!v || 'name_required',
-            ({ name: v }) => !v || v.length <= 50 || 'name_too_long',
+            ({ name: v }) => !!v || 'name:v8n_required',
+            ({ name: v }) => !v || v.length <= 50 || 'name:v8n_too_long',
             form => {
                 var _a;
                 if ((_a = form.provisioning_config) === null || _a === void 0 ? void 0 : _a.allow_autoprovisioning) {
@@ -180,543 +129,144 @@ export class GiftCardForm extends Base {
             form => {
                 var _a;
                 const v = (_a = form.provisioning_config) === null || _a === void 0 ? void 0 : _a.initial_balance_min;
-                return typeof v === 'number' && v <= 0 ? 'min-balance:v8n_negative' : true;
+                return typeof v === 'number' && v < 0 ? 'min-balance:v8n_negative' : true;
             },
             form => {
                 var _a;
                 const v = (_a = form.provisioning_config) === null || _a === void 0 ? void 0 : _a.initial_balance_max;
-                return typeof v === 'number' && v <= 0 ? 'max-balance:v8n_negative' : true;
+                return typeof v === 'number' && v < 0 ? 'max-balance:v8n_negative' : true;
+            },
+            ({ product_code_restrictions: v }) => {
+                return !v || v.length <= 5000 || 'product-code-restrictions:v8n_too_long';
             },
         ];
     }
-    render() {
-        var _a, _b;
-        const hidden = this.hiddenSelector;
-        const isNameHidden = hidden.matches('name', true);
-        const isCurrencyHidden = hidden.matches('currency', true);
-        const isExpiresHidden = hidden.matches('expires', true);
-        return html `
-      <div class="relative space-y-l">
-        ${isNameHidden && isCurrencyHidden && isExpiresHidden
-            ? ''
-            : html `
-              <div class="grid grid-cols-1 sm-grid-cols-3 md-grid-cols-4 gap-m">
-                ${isNameHidden ? '' : html `<div class="md-col-span-2">${this.__renderName()}</div>`}
-                ${isCurrencyHidden ? '' : this.__renderCurrency()}
-                ${isExpiresHidden ? '' : this.__renderExpires()}
-              </div>
-            `}
-
-        <foxy-internal-gift-card-form-provisioning-control infer="provisioning">
-        </foxy-internal-gift-card-form-provisioning-control>
-
-        ${hidden.matches('codes', true) || !this.data ? '' : this.__renderCodes()}
-        ${hidden.matches('product-restrictions', true) ? '' : this.__renderProductRestrictions()}
-        ${hidden.matches('category-restrictions', true) || !this.data
-            ? ''
-            : this.__renderCategoryRestrictions()}
-        ${hidden.matches('timestamps', true) ? '' : this.__renderTimestamps()}
-        ${hidden.matches('create', true) || !!this.data ? '' : this.__renderCreate()}
-        ${hidden.matches('delete', true) || !this.data ? '' : this.__renderDelete()}
-
-        <div
-          data-testid="spinner"
-          class=${classMap({
-            'transition duration-500 ease-in-out absolute inset-0 flex': true,
-            'opacity-0 pointer-events-none': !this.in('busy') && !this.in('fail'),
-        })}
-        >
-          <foxy-spinner
-            layout="vertical"
-            class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l"
-            state=${this.in('fail') ? 'error' : this.in('busy') ? 'busy' : 'empty'}
-            lang=${this.lang}
-            ns="${this.ns} ${(_b = (_a = customElements.get('foxy-spinner')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
-          >
-          </foxy-spinner>
-        </div>
-      </div>
-    `;
-    }
-    async _sendGet() {
-        const giftCard = await super._sendGet();
-        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;
-    }
-    __getErrorMessage(prefix) {
-        const error = this.errors.find(err => err.startsWith(prefix));
-        return error ? this.t(error.replace(prefix, 'v8n')).toString() : '';
-    }
-    __getValidator(prefix) {
-        return () => !this.errors.some(err => err.startsWith(prefix));
-    }
-    __renderName() {
-        var _a;
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('name:before')}
-
-        <vaadin-text-field
-          error-message=${this.__getErrorMessage('name')}
-          helper-text=${this.t('gift_card_name_helper_text')}
-          data-testid="name"
-          class="w-full"
-          label=${this.t('name')}
-          .checkValidity=${this.__getValidator('name')}
-          .value=${(_a = this.form.name) !== null && _a !== void 0 ? _a : ''}
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('name', true)}
-          ?readonly=${this.readonlySelector.matches('name', true)}
-          required
-          @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
-          @input=${(evt) => {
-            const newName = evt.currentTarget.value;
-            this.edit({ name: newName });
-        }}
-        >
-        </vaadin-text-field>
-
-        ${this.renderTemplateOrSlot('name:after')}
-      </div>
-    `;
-    }
-    __renderCurrency() {
-        var _a, _b;
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('currency:before')}
-
-        <vaadin-combo-box
-          item-label-path="label"
-          item-value-path="value"
-          item-id-path="value"
-          data-testid="currency"
-          class="w-full"
-          label=${this.t('currency')}
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('currency', true)}
-          ?readonly=${this.readonlySelector.matches('currency', true)}
-          .value=${(_b = (_a = this.form.currency_code) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : ''}
-          .items=${currencies.map(code => ({
-            label: `${this.t(`currency_${code}`)} (${code.toUpperCase()})`,
-            value: code,
-        }))}
-          @change=${(evt) => {
-            const comboBox = evt.currentTarget;
-            this.edit({ currency_code: comboBox.value });
-        }}
-        >
-        </vaadin-combo-box>
-
-        ${this.renderTemplateOrSlot('currency:after')}
-      </div>
-    `;
-    }
-    __renderExpires() {
-        var _a;
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('expires:before')}
-
-        <x-frequency-input
-          placeholder=${this.t('select')}
-          data-testid="expires"
-          label=${this.t('expires_after')}
-          class="w-full"
-          lang=${this.lang}
-          ns=${this.ns}
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('expires', true)}
-          ?readonly=${this.readonlySelector.matches('expires', true)}
-          .value=${(_a = this.form.expires_after) !== null && _a !== void 0 ? _a : ''}
-          @change=${(evt) => {
-            const input = evt.currentTarget;
-            this.edit({ expires_after: input.value });
-        }}
-        >
-        </x-frequency-input>
-
-        ${this.renderTemplateOrSlot('expires:after')}
-      </div>
-    `;
-    }
-    __renderCodes() {
-        var _a, _b, _c, _d, _e;
-        const { disabledSelector, readonlySelector, hiddenSelector, group, data, lang, ns } = this;
-        const isDisabled = !this.in('idle') || disabledSelector.matches('codes', true);
-        const filters = this.__codesTableQuery;
-        const url = new URL(data._links['fx:gift_card_codes'].href);
-        new URLSearchParams(filters !== null && filters !== void 0 ? filters : '').forEach((value, name) => url.searchParams.set(name, value));
-        url.searchParams.set('limit', '5');
-        const filterButtonLabel = filters === null ? 'filter' : 'clear_filters';
-        const filterButtonIcon = `icons:${filters === null ? 'filter-list' : 'clear'}`;
-        return html `
-      <div data-testid="codes">
-        <foxy-form-dialog
-          disabledcontrols=${disabledSelector.zoom('codes:generate:form').toString()}
-          readonlycontrols=${readonlySelector.zoom('codes:generate:form').toString()}
-          hiddencontrols="save-button ${hiddenSelector.zoom('codes:generate:form').toString()}"
-          header="generate"
-          parent=${(_a = data === null || data === void 0 ? void 0 : data._links['fx:generate_codes'].href) !== null && _a !== void 0 ? _a : ''}
-          group=${group}
-          lang=${lang}
-          form="foxy-generate-codes-form"
-          ns=${ns}
-          id="generate-codes-dialog"
-          alert
-          .related=${[url.toString()]}
-        >
-        </foxy-form-dialog>
-
-        <foxy-form-dialog
-          disabledcontrols=${disabledSelector.zoom('codes:form').toString()}
-          readonlycontrols=${readonlySelector.zoom('codes:form').toString()}
-          hiddencontrols=${hiddenSelector.zoom('codes:form').toString()}
-          header="code"
-          parent=${url.toString()}
-          group=${group}
-          lang=${lang}
-          form="foxy-gift-card-code-form"
-          ns=${ns}
-          id="code-dialog"
-        >
-        </foxy-form-dialog>
-
-        <foxy-form-dialog
-          disabledcontrols=${disabledSelector.zoom('codes:import:form').toString()}
-          readonlycontrols=${readonlySelector.zoom('codes:import:form').toString()}
-          hiddencontrols="save-button ${hiddenSelector.zoom('codes:import:form').toString()}"
-          header="import"
-          parent=${data._links['fx:gift_card_codes'].href}
-          group=${group}
-          lang=${lang}
-          form="foxy-gift-card-codes-form"
-          ns=${ns}
-          id="import-dialog"
-        >
-        </foxy-form-dialog>
-
-        ${this.renderTemplateOrSlot('codes:before')}
-
-        <div class="flex items-center justify-between mb-xs space-x-s">
-          <foxy-i18n
-            class="text-s font-medium text-secondary leading-none flex-1"
-            lang=${lang}
-            key="code_plural"
-            ns=${ns}
-          >
-          </foxy-i18n>
-
-          <vaadin-button
-            data-testid="codes:generate-button"
-            theme="success tertiary small"
-            ?disabled=${isDisabled}
-            @click=${(evt) => {
-            const dialog = this.renderRoot.querySelector('#generate-codes-dialog');
-            const button = evt.currentTarget;
-            dialog === null || dialog === void 0 ? void 0 : dialog.show(button);
-        }}
-          >
-            <foxy-i18n class="text-s" lang=${lang} key="generate" ns=${ns}></foxy-i18n>
-            <iron-icon class="icon-inline text-s" icon="icons:add"></iron-icon>
-          </vaadin-button>
-
-          <vaadin-button
-            data-testid="codes:import-button"
-            theme="contrast tertiary small"
-            ?disabled=${isDisabled}
-            @click=${(evt) => {
-            const dialog = this.renderRoot.querySelector('#import-dialog');
-            const button = evt.currentTarget;
-            dialog === null || dialog === void 0 ? void 0 : dialog.show(button);
-        }}
-          >
-            <foxy-i18n class="text-s" lang=${lang} key="import" ns=${ns}></foxy-i18n>
-            <iron-icon class="icon-inline text-s" icon="icons:open-in-browser"></iron-icon>
-          </vaadin-button>
-
-          <vaadin-button
-            data-testid="codes:filter-button"
-            theme="contrast ${filters === null ? 'tertiary' : ''} small"
-            ?disabled=${isDisabled}
-            @click=${() => (this.__codesTableQuery = filters === null ? '' : null)}
-          >
-            <foxy-i18n class="text-s" lang=${lang} key=${filterButtonLabel} ns=${ns}></foxy-i18n>
-            <iron-icon class="icon-inline text-s" icon=${filterButtonIcon}></iron-icon>
-          </vaadin-button>
-        </div>
-
-        <foxy-query-builder
-          class="my-s"
-          lang=${lang}
-          ns="${ns} ${(_c = (_b = customElements.get('foxy-query-builder')) === null || _b === void 0 ? void 0 : _b.defaultNS) !== null && _c !== void 0 ? _c : ''}"
-          ?disabled=${isDisabled}
-          ?hidden=${filters === null}
-          .options=${GiftCardForm.__codesQueryOptions}
-          .value=${filters !== null && filters !== void 0 ? filters : ''}
-          @change=${(evt) => {
-            const queryBuilder = evt.currentTarget;
-            this.__codesTableQuery = queryBuilder.value;
-        }}
-        >
-        </foxy-query-builder>
-
-        <foxy-pagination
-          first=${url.toString()}
-          lang=${lang}
-          ns="${ns} ${(_e = (_d = customElements.get('foxy-pagination')) === null || _d === void 0 ? void 0 : _d.defaultNS) !== null && _e !== void 0 ? _e : ''}"
-          ?disabled=${isDisabled}
-        >
-          <foxy-table
-            class="px-m mb-s border border-contrast-10 rounded"
-            group=${group}
-            lang=${lang}
-            ns=${ns}
-            .columns=${this.__codesTableColumns}
-          >
-          </foxy-table>
-        </foxy-pagination>
-
-        ${this.renderTemplateOrSlot('codes:after')}
-      </div>
-    `;
-    }
-    __renderProductRestrictions() {
-        var _a;
-        const scope = 'product-restrictions';
-        const isDisabled = !this.in('idle') || this.disabledSelector.matches(scope, true);
-        const isReadonly = this.readonlySelector.matches(scope, true);
-        const restrictions = (_a = this.form.product_code_restrictions) !== null && _a !== void 0 ? _a : '';
-        const groups = [
-            { header: 'allow', items: [] },
-            { header: 'block', items: [] },
-        ];
-        if (restrictions) {
-            restrictions.split(',').forEach(value => {
-                const isBlocklistValue = value.startsWith('-');
-                const target = isBlocklistValue ? 1 : 0;
-                const label = isBlocklistValue ? value.substring(1) : value;
-                groups[target].items.push({ label, value });
-            });
+    get hiddenSelector() {
+        const alwaysMatch = [super.hiddenSelector.toString()];
+        if (!this.data) {
+            alwaysMatch.push('codes', 'category-restrictions', 'attributes');
         }
-        return html `
-      <div data-testid="product-restrictions">
-        ${this.renderTemplateOrSlot('product-restrictions:before')}
-
-        <div class="space-y-s">
-          <x-group frame>
-            <foxy-i18n
-              class=${isDisabled ? 'text-disabled' : 'text-secondary'}
-              slot="header"
-              lang=${this.lang}
-              key="product_restrictions"
-              ns=${this.ns}
-            >
-            </foxy-i18n>
-
-            <div class="grid sm-grid-cols-2 bg-contrast-10" style="gap: 1px">
-              ${groups.map((group, index) => {
-            return html `
-                  <x-group class="bg-base pt-m">
-                    <foxy-i18n
-                      class=${isDisabled ? 'text-disabled' : 'text-tertiary'}
-                      slot="header"
-                      lang=${this.lang}
-                      key=${group.header}
-                      ns=${this.ns}
-                    >
-                    </foxy-i18n>
-
-                    <x-editable-list
-                      data-testid="product-restrictions:${group.header}"
-                      lang=${this.lang}
-                      ns=${this.ns}
-                      ?disabled=${isDisabled}
-                      ?readonly=${isReadonly}
-                      .items=${group.items}
-                      @change=${(evt) => {
-                const newItemsByGroup = [
-                    index === 0 ? evt.currentTarget.items : groups[0].items,
-                    index === 1 ? evt.currentTarget.items : groups[1].items,
-                ];
-                const newSanitizedItemsByGroup = newItemsByGroup
-                    .map(list => list.map(v => v.value.replace(/^[\s-]*/, '').trimEnd()))
-                    .map(list => list.filter(v => !!v))
-                    .map(list => Array.from(new Set(list)));
-                const newRestrictions = newSanitizedItemsByGroup[0]
-                    .concat(newSanitizedItemsByGroup[1].map(v => `-${v}`))
-                    .join(',');
-                this.edit({ product_code_restrictions: newRestrictions });
-            }}
-                    >
-                    </x-editable-list>
-                  </x-group>
-                `;
-        })}
-            </div>
-          </x-group>
-
-          <foxy-i18n
-            class=${classMap({
-            'block text-xs leading-s transition-colors': true,
-            'text-secondary': !isDisabled,
-            'text-disabled': isDisabled,
-        })}
-            lang=${this.lang}
-            key="gift_card_product_restrictions_explainer"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
-        </div>
-
-        ${this.renderTemplateOrSlot('product-restrictions:after')}
-      </div>
-    `;
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
     }
-    __renderCategoryRestrictions() {
-        var _a, _b, _c;
-        const scope = 'category-restrictions';
-        const isDisabled = !this.in('idle') || this.disabledSelector.matches(scope, true);
-        const isReadonly = this.readonlySelector.matches(scope, true);
-        const giftCardItemCategories = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:gift_card_item_categories'].href;
+    renderHeaderActions(data) {
         return html `
-      <div data-testid="category-restrictions">
-        ${this.renderTemplateOrSlot(`${scope}:before`)}
-
-        <div class="space-y-xs">
-          <foxy-pagination
-            first=${this.__itemCategories}
-            lang=${this.lang}
-            ns="${this.ns} ${(_c = (_b = customElements.get('foxy-pagination')) === null || _b === void 0 ? void 0 : _b.defaultNS) !== null && _c !== void 0 ? _c : ''}"
-            ?disabled=${isDisabled}
-          >
-            <foxy-i18n
-              class="block text-s font-medium text-secondary leading-none mb-s"
-              lang=${this.lang}
-              key="category_restrictions"
-              ns=${this.ns}
-            >
-            </foxy-i18n>
-
-            <x-category-restrictions-page
-              gift-card-item-categories=${ifDefined(giftCardItemCategories)}
-              data-testid="category-restrictions:page"
-              gift-card=${this.href}
-              class="border border-contrast-10 rounded mb-s"
-              group=${this.group}
-              lang=${this.lang}
-              ns=${this.ns}
-              ?disabled=${isDisabled}
-              ?readonly=${isReadonly}
-            >
-            </x-category-restrictions-page>
-          </foxy-pagination>
-
-          <foxy-i18n
-            class="block text-xs leading-s text-secondary"
-            lang=${this.lang}
-            key="gift_card_category_restrictions_helper_text"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
-        </div>
-
-        ${this.renderTemplateOrSlot(`${scope}:after`)}
-      </div>
+      <foxy-internal-bulk-add-action-control
+        parent=${data._links['fx:generate_codes'].href}
+        infer="generate"
+        form="foxy-generate-codes-form"
+        .related=${[data._links['fx:gift_card_codes'].href]}
+      >
+      </foxy-internal-bulk-add-action-control>
+
+      <foxy-internal-bulk-add-action-control
+        parent=${data._links['fx:gift_card_codes'].href}
+        infer="import"
+        form="foxy-gift-card-codes-form"
+        .related=${[data._links['fx:gift_card_codes'].href]}
+      >
+      </foxy-internal-bulk-add-action-control>
+
+      ${super.renderHeaderActions(data)}
     `;
     }
-    __renderTimestamps() {
+    renderBody() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        let codesUrl;
+        try {
+            const url = new URL((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:gift_card_codes'].href) !== null && _b !== void 0 ? _b : '');
+            url.searchParams.set('order', 'date_created desc');
+            codesUrl = url.toString();
+        }
+        catch (_j) {
+            codesUrl = undefined;
+        }
         return html `
-      <div>
-        ${this.renderTemplateOrSlot('timestamps:before')}
-
-        <x-metadata
-          data-testid="timestamps"
-          .items=${['date_modified', 'date_created'].map(field => {
-            var _a;
-            return ({
-                name: this.t(field),
-                value: ((_a = this.data) === null || _a === void 0 ? void 0 : _a[field]) ? this.t('date', { value: new Date(this.data[field]) })
-                    : '',
-            });
-        })}
+      ${this.renderHeader()}
+
+      <div class="grid grid-cols-1 sm-grid-cols-3 md-grid-cols-4 gap-m">
+        <foxy-internal-text-control infer="name" class="md-col-span-2">
+        </foxy-internal-text-control>
+
+        <foxy-internal-select-control
+          property="currency_code"
+          infer="currency"
+          .getValue=${this.__currencyCodeGetValue}
+          .options=${currencies.map(value => ({
+            label: this.t(`currency.code_${value}`),
+            value,
+        }))}
         >
-        </x-metadata>
+        </foxy-internal-select-control>
 
-        ${this.renderTemplateOrSlot('timestamps:after')}
+        <foxy-internal-frequency-control property="expires_after" infer="expires">
+        </foxy-internal-frequency-control>
       </div>
-    `;
-    }
-    __renderCreate() {
-        const isCleanTemplateInvalid = this.in({ idle: { template: { clean: 'invalid' } } });
-        const isDirtyTemplateInvalid = this.in({ idle: { template: { dirty: 'invalid' } } });
-        const isCleanSnapshotInvalid = this.in({ idle: { snapshot: { clean: 'invalid' } } });
-        const isDirtySnapshotInvalid = this.in({ idle: { snapshot: { dirty: 'invalid' } } });
-        const isTemplateInvalid = isCleanTemplateInvalid || isDirtyTemplateInvalid;
-        const isSnaphotInvalid = isCleanSnapshotInvalid || isDirtySnapshotInvalid;
-        const isInvalid = isTemplateInvalid || isSnaphotInvalid;
-        const isBusy = this.in('busy');
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot('create:before')}
 
-        <vaadin-button
-          data-testid="create"
-          class="w-full"
-          theme="primary success"
-          ?disabled=${isBusy || isInvalid || this.disabledSelector.matches('create', true)}
-          @click=${this.submit}
-        >
-          <foxy-i18n ns=${this.ns} key="create" lang=${this.lang}></foxy-i18n>
-        </vaadin-button>
-
-        ${this.renderTemplateOrSlot('create:after')}
-      </div>
+      <foxy-internal-gift-card-form-provisioning-control infer="provisioning">
+      </foxy-internal-gift-card-form-provisioning-control>
+
+      <foxy-internal-async-list-control
+        first=${codesUrl}
+        limit="5"
+        infer="codes"
+        item="foxy-gift-card-code-card"
+        form="foxy-gift-card-code-form"
+        alert
+        .formProps=${{ '.getCustomerHref': this.getCustomerHref }}
+        .actions=${this.__codesActions}
+        .filters=${this.__codesFilters}
+      >
+      </foxy-internal-async-list-control>
+
+      <foxy-internal-editable-list-control
+        infer="product-code-restrictions"
+        .getValue=${this.__productCodeRestrictionsGetValue}
+        .setValue=${this.__productCodeRestrictionsSetValue}
+        .units=${[
+            { label: this.t('product-code-restrictions.unit_allow'), value: 'allow' },
+            { label: this.t('product-code-restrictions.unit_block'), value: 'block' },
+        ]}
+      >
+      </foxy-internal-editable-list-control>
+
+      <foxy-internal-async-resource-link-list-control
+        foreign-key-for-uri="item_category_uri"
+        foreign-key-for-id="item_category_id"
+        own-key-for-uri="gift_card_uri"
+        options-href=${ifDefined((_d = (_c = this.__storeLoader) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d._links['fx:item_categories'].href)}
+        links-href=${ifDefined((_e = this.data) === null || _e === void 0 ? void 0 : _e._links['fx:gift_card_item_categories'].href)}
+        embed-key="fx:gift_card_item_categories"
+        own-uri=${ifDefined((_f = this.data) === null || _f === void 0 ? void 0 : _f._links.self.href)}
+        infer="category-restrictions"
+        limit="5"
+        item="foxy-item-category-card"
+      >
+      </foxy-internal-async-resource-link-list-control>
+
+      <foxy-internal-async-list-control
+        first=${ifDefined((_g = this.data) === null || _g === void 0 ? void 0 : _g._links['fx:attributes'].href)}
+        limit="5"
+        infer="attributes"
+        item="foxy-attribute-card"
+        form="foxy-attribute-form"
+        alert
+      >
+      </foxy-internal-async-list-control>
+
+      ${super.renderBody()}
+
+      <foxy-nucleon
+        infer=""
+        class="hidden"
+        href=${ifDefined((_h = this.data) === null || _h === void 0 ? void 0 : _h._links['fx:store'].href)}
+        id=${this.__storeLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
     `;
     }
-    __renderDelete() {
-        return html `
-      <div>
-        <foxy-internal-confirm-dialog
-          data-testid="confirm"
-          message="delete_prompt"
-          confirm="delete"
-          cancel="cancel"
-          header="delete"
-          theme="primary error"
-          lang=${this.lang}
-          ns=${this.ns}
-          id="confirm"
-          @hide=${(evt) => !evt.detail.cancelled && this.delete()}
-        >
-        </foxy-internal-confirm-dialog>
-
-        ${this.renderTemplateOrSlot('delete:before')}
-
-        <vaadin-button
-          data-testid="delete"
-          theme="error"
-          class="w-full"
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}
-          @click=${(evt) => {
-            const confirm = this.renderRoot.querySelector('#confirm');
-            confirm.show(evt.currentTarget);
-        }}
-        >
-          <foxy-i18n ns=${this.ns} key="delete" lang=${this.lang}></foxy-i18n>
-        </vaadin-button>
-
-        ${this.renderTemplateOrSlot('delete:after')}
-      </div>
-    `;
+    get __storeLoader() {
+        return this.renderRoot.querySelector(`#${this.__storeLoaderId}`);
     }
 }
-GiftCardForm.__codesQueryOptions = [
-    { label: 'code', path: 'code', type: Type.String },
-    { label: 'current_balance', path: 'current_balance', type: Type.Number },
-    { label: 'end_date', path: 'end_date', type: Type.Date },
-    { label: 'date_created', path: 'date_created', type: Type.Date },
-    { label: 'date_modified', path: 'date_modified', type: Type.Date },
-];
 //# sourceMappingURL=GiftCardForm.js.map