@foxy.io/elements 1.15.0-beta.1 → 1.15.0-beta.10

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

@@ -0,0 +1,684 @@
+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 { 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 { 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)))));
+/**
+ * Form element for creating or editing gift cards (`fx:gift_card`).
+ *
+ * @slot name:before
+ * @slot name:after
+ *
+ * @slot currency:before
+ * @slot currency:after
+ *
+ * @slot expires:before
+ * @slot expires:after
+ *
+ * @slot codes:before
+ * @slot codes:after
+ *
+ * @slot product-restrictions:before
+ * @slot product-restrictions:after
+ *
+ * @slot category-restrictions:before
+ * @slot category-restrictions:after
+ *
+ * @slot timestamps:before
+ * @slot timestamps:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @element foxy-gift-card-form
+ * @since 1.15.0
+ */
+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 => html `
+        <vaadin-button
+          theme="tertiary contrast"
+          class="p-0"
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('codes', true)}
+          @click=${(evt) => {
+                    const dialog = this.renderRoot.querySelector('#code-dialog');
+                    const button = evt.currentTarget;
+                    dialog.href = ctx.data._links.self.href;
+                    dialog.show(button);
+                }}
+        >
+          <span class="font-tnum">${ctx.data.code}</span>
+        </vaadin-button>
+      `,
+            },
+            {
+                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>
+      `,
+            },
+            {
+                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() {
+        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-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-property-table': PropertyTable,
+            'x-editable-list': EditableList,
+            'x-group': Group,
+        };
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            __codesTableQuery: { attribute: false },
+            __itemCategories: { attribute: false },
+        };
+    }
+    static get v8n() {
+        return [
+            ({ name: v }) => !!v || 'name_required',
+            ({ name: v }) => !v || v.length <= 50 || 'name_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>
+            `}
+        ${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="bg-contrast-5 rounded-tl-l rounded-tr-s rounded-b-l p-m mb-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-t-l rounded-b-l"
+            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 });
+            });
+        }
+        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>
+    `;
+    }
+    __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;
+        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-t-l rounded-b-l 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>
+    `;
+    }
+    __renderTimestamps() {
+        return html `
+      <div>
+        ${this.renderTemplateOrSlot('timestamps:before')}
+
+        <x-property-table
+          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]) })
+                    : '',
+            });
+        })}
+        >
+        </x-property-table>
+
+        ${this.renderTemplateOrSlot('timestamps:after')}
+      </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>
+    `;
+    }
+    __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="primary 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>
+    `;
+    }
+}
+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