@foxy.io/elements 1.11.0-beta.2 → 1.11.0-beta.6

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

@@ -0,0 +1,22 @@
+import { TemplateResult } from 'lit-html';
+import { Data } from './types';
+import { TwoLineCard } from './TwoLineCard';
+declare const CustomFieldCard_base: typeof TwoLineCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+/**
+ * Basic card displaying a custom field.
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-custom-field-card
+ * @since 1.11.0
+ */
+export declare class CustomFieldCard extends CustomFieldCard_base<Data> {
+    render(): TemplateResult;
+}
+export {};

package/dist/elements/public/CustomFieldCard/CustomFieldCard.js

@@ -0,0 +1,24 @@
+import { html } from 'lit-html';
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { TwoLineCard } from "./TwoLineCard.js";
+/**
+ * Basic card displaying a custom field.
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-custom-field-card
+ * @since 1.11.0
+ */
+export class CustomFieldCard extends TranslatableMixin(TwoLineCard, 'custom-field-card') {
+    render() {
+        return super.render({
+            title: data => html `${data.name}`,
+            subtitle: data => html `${data.value}`,
+        });
+    }
+}
+//# sourceMappingURL=CustomFieldCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFieldCard.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldCard/CustomFieldCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,yBAAsB;AAE5C;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,eAAgB,SAAQ,iBAAiB,CAAC,WAAW,EAAE,mBAAmB,CAAO;IAC5F,MAAM;QACJ,OAAO,KAAK,CAAC,MAAM,CAAC;YAClB,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,EAAE;YACjC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,KAAK,EAAE;SACtC,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { Data } from './types';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from './TwoLineCard';\n\n/**\n * Basic card displaying a custom field.\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @element foxy-custom-field-card\n * @since 1.11.0\n */\nexport class CustomFieldCard extends TranslatableMixin(TwoLineCard, 'custom-field-card')<Data> {\n  render(): TemplateResult {\n    return super.render({\n      title: data => html`${data.name}`,\n      subtitle: data => html`${data.value}`,\n    });\n  }\n}\n"]}

package/dist/elements/public/CustomFieldCard/TwoLineCard.d.ts

@@ -0,0 +1,29 @@
+import { Renderer } from '../../../mixins/configurable';
+import { TemplateResult } from 'lit-html';
+import { HALJSONResource } from '../NucleonElement/types';
+import { NucleonElement } from '../NucleonElement/NucleonElement';
+import { PropertyDeclarations } from 'lit-element';
+export declare type TemplateFn<TData extends HALJSONResource> = (data: TData) => TemplateResult;
+export declare type Templates<TData extends HALJSONResource> = {
+    'title:before'?: Renderer<TData>;
+    'title:after'?: Renderer<TData>;
+    'subtitle:before'?: Renderer<TData>;
+    'subtitle:after'?: Renderer<TData>;
+};
+export declare type RenderOptions<TData extends HALJSONResource> = {
+    title: TemplateFn<TData>;
+    subtitle: TemplateFn<TData>;
+};
+declare const Base: typeof NucleonElement & {
+    styles: import("lit-element").CSSResultArray;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
+export declare class TwoLineCard<TData extends HALJSONResource> extends Base<TData> {
+    static get properties(): PropertyDeclarations;
+    templates: Templates<TData>;
+    lang: string;
+    ns: string;
+    private readonly __renderTitle;
+    private readonly __renderSubtitle;
+    render(options?: RenderOptions<TData>): TemplateResult;
+}
+export {};

package/dist/elements/public/CustomFieldCard/TwoLineCard.js

@@ -0,0 +1,70 @@
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { html } from 'lit-html';
+import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import { ThemeableMixin } from "../../../mixins/themeable.js";
+import { classMap } from "../../../utils/class-map.js";
+const Base = ConfigurableMixin(ThemeableMixin(NucleonElement));
+export class TwoLineCard extends Base {
+    constructor() {
+        super(...arguments);
+        this.templates = {};
+        this.lang = '';
+        this.ns = '';
+        this.__renderTitle = (content) => {
+            return html `
+      <div data-testid="title">
+        ${this.renderTemplateOrSlot('title:before')}
+        <div class="text-secondary">${this.data ? content === null || content === void 0 ? void 0 : content(this.data) : ''}&ZeroWidthSpace;</div>
+        ${this.renderTemplateOrSlot('title:after')}
+      </div>
+    `;
+        };
+        this.__renderSubtitle = (content) => {
+            return html `
+      <div data-testid="subtitle">
+        ${this.renderTemplateOrSlot('subtitle:before')}
+        <div class="font-semibold">${this.data ? content === null || content === void 0 ? void 0 : content(this.data) : ''}&ZeroWidthSpace;</div>
+        ${this.renderTemplateOrSlot('subtitle:after')}
+      </div>
+    `;
+        };
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            lang: { type: String },
+            ns: { type: String },
+        };
+    }
+    render(options) {
+        var _a, _b;
+        const hiddenSelector = this.hiddenSelector;
+        return html `
+      <div
+        aria-live="polite"
+        aria-busy=${!this.data && this.in('busy')}
+        class="relative text-body text-s font-lumo leading-m"
+      >
+        ${hiddenSelector.matches('title', true) ? '' : this.__renderTitle(options === null || options === void 0 ? void 0 : options.title)}
+        ${hiddenSelector.matches('subtitle', true) ? '' : this.__renderSubtitle(options === null || options === void 0 ? void 0 : options.subtitle)}
+
+        <div
+          class=${classMap({
+            'transition duration-250 ease-in-out absolute inset-0 flex': true,
+            'opacity-0 pointer-events-none': !!this.data,
+        })}
+        >
+          <foxy-spinner
+            data-testid="spinner"
+            class="m-auto"
+            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}
+            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>
+    `;
+    }
+}
+//# sourceMappingURL=TwoLineCard.js.map

package/dist/elements/public/CustomFieldCard/TwoLineCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TwoLineCard.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldCard/TwoLineCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAY,wCAAqC;AAC3E,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAElE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAgBpD,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAE/D,MAAM,OAAO,WAA2C,SAAQ,IAAW;IAA3E;;QASE,cAAS,GAAqB,EAAE,CAAC;QAEjC,SAAI,GAAG,EAAE,CAAC;QAEV,OAAE,GAAG,EAAE,CAAC;QAES,kBAAa,GAAG,CAAC,OAA2B,EAAE,EAAE;YAC/D,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC;sCACb,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE;UACjE,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;;KAE7C,CAAC;QACJ,CAAC,CAAC;QAEe,qBAAgB,GAAG,CAAC,OAA2B,EAAE,EAAE;YAClE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;qCACjB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE;UAChE,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC;;KAEhD,CAAC;QACJ,CAAC,CAAC;IAgCJ,CAAC;IAhEC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACtB,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACrB,CAAC;IACJ,CAAC;IA4BD,MAAM,CAAC,OAA8B;;QACnC,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAE3C,OAAO,IAAI,CAAA;;;oBAGK,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;;UAGvC,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,CAAC;UAC/E,cAAc,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;;;kBAGhF,QAAQ,CAAC;YACf,2DAA2D,EAAE,IAAI;YACjE,+BAA+B,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAC7C,CAAC;;;;;oBAKQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;mBAC7E,IAAI,CAAC,IAAI;kBACV,IAAI,CAAC,EAAE,IAAI,YAAA,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,0CAAE,SAAS,mCAAI,EAAE;;;;;KAK3E,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { ConfigurableMixin, Renderer } from '../../../mixins/configurable';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { HALJSONResource } from '../NucleonElement/types';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { classMap } from '../../../utils/class-map';\n\nexport type TemplateFn<TData extends HALJSONResource> = (data: TData) => TemplateResult;\n\nexport type Templates<TData extends HALJSONResource> = {\n  'title:before'?: Renderer<TData>;\n  'title:after'?: Renderer<TData>;\n  'subtitle:before'?: Renderer<TData>;\n  'subtitle:after'?: Renderer<TData>;\n};\n\nexport type RenderOptions<TData extends HALJSONResource> = {\n  title: TemplateFn<TData>;\n  subtitle: TemplateFn<TData>;\n};\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\nexport class TwoLineCard<TData extends HALJSONResource> extends Base<TData> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      lang: { type: String },\n      ns: { type: String },\n    };\n  }\n\n  templates: Templates<TData> = {};\n\n  lang = '';\n\n  ns = '';\n\n  private readonly __renderTitle = (content?: TemplateFn<TData>) => {\n    return html`\n      <div data-testid=\"title\">\n        ${this.renderTemplateOrSlot('title:before')}\n        <div class=\"text-secondary\">${this.data ? content?.(this.data) : ''}&ZeroWidthSpace;</div>\n        ${this.renderTemplateOrSlot('title:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderSubtitle = (content?: TemplateFn<TData>) => {\n    return html`\n      <div data-testid=\"subtitle\">\n        ${this.renderTemplateOrSlot('subtitle:before')}\n        <div class=\"font-semibold\">${this.data ? content?.(this.data) : ''}&ZeroWidthSpace;</div>\n        ${this.renderTemplateOrSlot('subtitle:after')}\n      </div>\n    `;\n  };\n\n  render(options?: RenderOptions<TData>): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n\n    return html`\n      <div\n        aria-live=\"polite\"\n        aria-busy=${!this.data && this.in('busy')}\n        class=\"relative text-body text-s font-lumo leading-m\"\n      >\n        ${hiddenSelector.matches('title', true) ? '' : this.__renderTitle(options?.title)}\n        ${hiddenSelector.matches('subtitle', true) ? '' : this.__renderSubtitle(options?.subtitle)}\n\n        <div\n          class=${classMap({\n            'transition duration-250 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            class=\"m-auto\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,4 @@
+import '../../internal/InternalSandbox/index';
+import '../Spinner/index';
+import { CustomFieldCard } from './CustomFieldCard';
+export { CustomFieldCard };

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

@@ -0,0 +1,6 @@
+import "../../internal/InternalSandbox/index.js";
+import "../Spinner/index.js";
+import { CustomFieldCard } from "./CustomFieldCard.js";
+customElements.define('foxy-custom-field-card', CustomFieldCard);
+export { CustomFieldCard };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldCard/index.ts"],"names":[],"mappings":"AAAA,iDAA8C;AAC9C,6BAA0B;AAE1B,OAAO,EAAE,eAAe,EAAE,6BAA0B;AAEpD,cAAc,CAAC,MAAM,CAAC,wBAAwB,EAAE,eAAe,CAAC,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\n\nimport { CustomFieldCard } from './CustomFieldCard';\n\ncustomElements.define('foxy-custom-field-card', CustomFieldCard);\n\nexport { CustomFieldCard };\n"]}

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

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

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

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

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

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

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

@@ -0,0 +1,49 @@
+import { Data, Templates } from './types';
+import { ScopedElementsMap } from '@open-wc/scoped-elements';
+import { TemplateResult } from 'lit-html';
+import { NucleonElement } from '../NucleonElement/NucleonElement';
+import { NucleonV8N } from '../NucleonElement/types';
+declare const Base: typeof NucleonElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost> & {
+    styles: import("lit-element").CSSResultArray;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+/**
+ * Form element for creating or editing custom fields.
+ *
+ * @slot name:before
+ * @slot name:after
+ * @slot value:before
+ * @slot value:after
+ * @slot visibility:before
+ * @slot visibility:after
+ * @slot timestamps:before
+ * @slot timestamps:after
+ * @slot create:before
+ * @slot create:after
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @element foxy-custom-field-form
+ * @since 1.11.0
+ */
+export declare class CustomFieldForm extends Base<Data> {
+    static get scopedElements(): ScopedElementsMap;
+    static get v8n(): NucleonV8N<Data>;
+    templates: Templates;
+    private readonly __getValidator;
+    private readonly __bindField;
+    private readonly __maybeRenderTextField;
+    private readonly __renderVisibility;
+    private readonly __renderTimestamps;
+    private readonly __renderDelete;
+    private readonly __renderCreate;
+    render(): TemplateResult;
+    disconnectedCallback(): void;
+    private get __confirmDialog();
+    private __getErrorMessage;
+    private __handleKeyDown;
+    private __handleDeleteClick;
+    private __handleConfirmHide;
+}
+export {};

package/dist/elements/public/CustomFieldForm/CustomFieldForm.js

@@ -0,0 +1,235 @@
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { html } from 'lit-html';
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import { PropertyTable } from "../../private/index.js";
+import { ThemeableMixin } from "../../../mixins/themeable.js";
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { classMap } from "../../../utils/class-map.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import memoize from 'lodash-es/memoize';
+const NS = 'custom-field-form';
+const Base = TranslatableMixin(ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(NucleonElement))), NS);
+/**
+ * Form element for creating or editing custom fields.
+ *
+ * @slot name:before
+ * @slot name:after
+ * @slot value:before
+ * @slot value:after
+ * @slot visibility:before
+ * @slot visibility:after
+ * @slot timestamps:before
+ * @slot timestamps:after
+ * @slot create:before
+ * @slot create:after
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @element foxy-custom-field-form
+ * @since 1.11.0
+ */
+export class CustomFieldForm extends Base {
+    constructor() {
+        super(...arguments);
+        this.templates = {};
+        this.__getValidator = memoize((prefix) => () => {
+            return !this.errors.some(err => err.startsWith(prefix));
+        });
+        this.__bindField = memoize((key) => {
+            return (evt) => {
+                const target = evt.target;
+                this.edit({ [key]: target.value });
+            };
+        });
+        this.__maybeRenderTextField = ({ field }) => {
+            var _a, _b;
+            const bsid = field.replace(/_/, '-');
+            if (this.hiddenSelector.matches(bsid))
+                return '';
+            return html `
+      <div>
+        ${this.renderTemplateOrSlot(`${bsid}:before`)}
+
+        <vaadin-text-field
+          class="w-full"
+          label=${this.t(field).toString()}
+          value=${ifDefined((_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a[field]) === null || _b === void 0 ? void 0 : _b.toString())}
+          error-message=${this.__getErrorMessage(field)}
+          data-testid=${field}
+          .checkValidity=${this.__getValidator(field)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid)}
+          ?readonly=${this.readonlySelector.matches(bsid)}
+          @input=${this.__bindField(field)}
+          @keydown=${this.__handleKeyDown}
+        >
+        </vaadin-text-field>
+
+        ${this.renderTemplateOrSlot(`${bsid}:after`)}
+      </div>
+    `;
+        };
+        this.__renderVisibility = () => {
+            const { disabledSelector, form, lang, ns } = this;
+            const isDisabled = !this.in('idle') || disabledSelector.matches('visibility', true);
+            return html `
+      <div>
+        ${this.renderTemplateOrSlot('visibility:before')}
+
+        <vaadin-checkbox ?checked=${!form.is_hidden} ?disabled=${isDisabled}>
+          <foxy-i18n lang=${lang} key="show_on_receipt" ns=${ns}></foxy-i18n>
+        </vaadin-checkbox>
+
+        ${this.renderTemplateOrSlot('visibility:after')}
+      </div>
+    `;
+        };
+        this.__renderTimestamps = () => {
+            const items = ['date_modified', 'date_created'].map(field => ({
+                name: this.t(field),
+                value: this.t('date', { value: new Date(this.data[field]) }),
+            }));
+            return html `
+      <div>
+        ${this.renderTemplateOrSlot('timestamps:before')}
+        <x-property-table .items=${items} data-testid="timestamps"></x-property-table>
+        ${this.renderTemplateOrSlot('timestamps:after')}
+      </div>
+    `;
+        };
+        this.__renderDelete = () => {
+            return html `
+      <div>
+        ${this.renderTemplateOrSlot('delete:before')}
+
+        <vaadin-button
+          class="w-full"
+          data-testid="delete"
+          theme="error primary"
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}
+          @click=${this.__handleDeleteClick}
+        >
+          <foxy-i18n ns=${this.ns} lang=${this.lang} key="delete"></foxy-i18n>
+        </vaadin-button>
+
+        ${this.renderTemplateOrSlot('delete:after')}
+      </div>
+    `;
+        };
+        this.__renderCreate = () => {
+            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('create:before')}
+
+        <vaadin-button
+          data-testid="create"
+          class="w-full"
+          theme="success primary"
+          ?disabled=${!this.in('idle') || !isValid || this.disabledSelector.matches('create', true)}
+          @click=${() => this.submit()}
+        >
+          <foxy-i18n ns=${this.ns} lang=${this.lang} key="create"></foxy-i18n>
+        </vaadin-button>
+
+        ${this.renderTemplateOrSlot('create:after')}
+      </div>
+    `;
+        };
+    }
+    static get scopedElements() {
+        return {
+            'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),
+            'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
+            'vaadin-text-field': customElements.get('vaadin-text-field'),
+            'vaadin-checkbox': customElements.get('vaadin-checkbox'),
+            'x-property-table': PropertyTable,
+            'vaadin-button': customElements.get('vaadin-button'),
+            'foxy-i18n': customElements.get('foxy-i18n'),
+            'foxy-spinner': customElements.get('foxy-spinner'),
+        };
+    }
+    static get v8n() {
+        return [
+            ({ value }) => (value && value.length > 0) || 'value_required',
+            ({ value }) => (value && value.length <= 1000) || 'value_too_long',
+            ({ name }) => (name && name.length > 0) || 'name_required',
+            ({ name }) => (name && name.length <= 500) || 'name_too_long',
+        ];
+    }
+    render() {
+        const { hiddenSelector, data, lang, ns } = this;
+        const isBusy = this.in('busy');
+        const isFail = this.in('fail');
+        return html `
+      <foxy-internal-confirm-dialog
+        data-testid="confirm"
+        message="delete_prompt"
+        confirm="delete"
+        cancel="cancel"
+        header="delete"
+        theme="primary error"
+        lang=${lang}
+        ns=${ns}
+        id="confirm"
+        @hide=${this.__handleConfirmHide}
+      >
+      </foxy-internal-confirm-dialog>
+
+      <div class="relative" aria-busy=${this.in('busy')} aria-live="polite">
+        <div class="grid grid-cols-1 gap-l">
+          ${this.__maybeRenderTextField({ field: 'name' })}
+          ${this.__maybeRenderTextField({ field: 'value' })}
+          ${hiddenSelector.matches('visibility', true) ? '' : this.__renderVisibility()}
+          ${hiddenSelector.matches('timestamps', true) || !data ? '' : this.__renderTimestamps()}
+          ${hiddenSelector.matches('delete', true) || !data ? '' : this.__renderDelete()}
+          ${hiddenSelector.matches('create', true) || data ? '' : this.__renderCreate()}
+        </div>
+
+        <div
+          data-testid="spinner"
+          class=${classMap({
+            'transition duration-500 ease-in-out absolute inset-0 flex': true,
+            'opacity-0 pointer-events-none': !isBusy && !isFail,
+        })}
+        >
+          <foxy-spinner
+            layout="vertical"
+            class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l"
+            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}
+            lang=${lang}
+            ns=${ns}
+          >
+          </foxy-spinner>
+        </div>
+      </div>
+    `;
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        super.disconnectedCallback();
+        (_b = (_a = this.__bindField.cache).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_d = (_c = this.__getValidator.cache).clear) === null || _d === void 0 ? void 0 : _d.call(_c);
+    }
+    get __confirmDialog() {
+        return this.renderRoot.querySelector('#confirm');
+    }
+    __getErrorMessage(prefix) {
+        const error = this.errors.find(err => err.startsWith(prefix));
+        return error ? this.t(error.replace(prefix, 'v8n')).toString() : '';
+    }
+    __handleKeyDown(evt) {
+        if (evt.key === 'Enter')
+            this.submit();
+    }
+    __handleDeleteClick(evt) {
+        this.__confirmDialog.show(evt.currentTarget);
+    }
+    __handleConfirmHide(evt) {
+        if (!evt.detail.cancelled)
+            this.delete();
+    }
+}
+//# sourceMappingURL=CustomFieldForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFieldForm.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldForm/CustomFieldForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates, TextFieldParams } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { PropertyTable } from '../../private/index';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport memoize from 'lodash-es/memoize';\n\nconst NS = 'custom-field-form';\nconst Base = TranslatableMixin(\n  ConfigurableMixin(ThemeableMixin(ScopedElementsMixin(NucleonElement))),\n  NS\n);\n\n/**\n * Form element for creating or editing custom fields.\n *\n * @slot name:before\n * @slot name:after\n * @slot value:before\n * @slot value:after\n * @slot visibility:before\n * @slot visibility:after\n * @slot timestamps:before\n * @slot timestamps:after\n * @slot create:before\n * @slot create:after\n * @slot delete:before\n * @slot delete:after\n *\n * @element foxy-custom-field-form\n * @since 1.11.0\n */\nexport class CustomFieldForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'vaadin-checkbox': customElements.get('vaadin-checkbox'),\n      'x-property-table': PropertyTable,\n      'vaadin-button': customElements.get('vaadin-button'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ value }) => (value && value.length > 0) || 'value_required',\n      ({ value }) => (value && value.length <= 1000) || 'value_too_long',\n      ({ name }) => (name && name.length > 0) || 'name_required',\n      ({ name }) => (name && name.length <= 500) || 'name_too_long',\n    ];\n  }\n\n  templates: Templates = {};\n\n  private readonly __getValidator = memoize((prefix: string) => () => {\n    return !this.errors.some(err => err.startsWith(prefix));\n  });\n\n  private readonly __bindField = memoize((key: keyof Data) => {\n    return (evt: CustomEvent) => {\n      const target = evt.target as HTMLInputElement;\n      this.edit({ [key]: target.value });\n    };\n  });\n\n  private readonly __maybeRenderTextField = ({ field }: TextFieldParams) => {\n    const bsid = field.replace(/_/, '-');\n    if (this.hiddenSelector.matches(bsid)) return '';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${bsid}:before`)}\n\n        <vaadin-text-field\n          class=\"w-full\"\n          label=${this.t(field).toString()}\n          value=${ifDefined(this.form?.[field]?.toString())}\n          error-message=${this.__getErrorMessage(field)}\n          data-testid=${field}\n          .checkValidity=${this.__getValidator(field)}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(bsid)}\n          ?readonly=${this.readonlySelector.matches(bsid)}\n          @input=${this.__bindField(field)}\n          @keydown=${this.__handleKeyDown}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot(`${bsid}:after`)}\n      </div>\n    `;\n  };\n\n  private readonly __renderVisibility = () => {\n    const { disabledSelector, form, lang, ns } = this;\n    const isDisabled = !this.in('idle') || disabledSelector.matches('visibility', true);\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('visibility:before')}\n\n        <vaadin-checkbox ?checked=${!form.is_hidden} ?disabled=${isDisabled}>\n          <foxy-i18n lang=${lang} key=\"show_on_receipt\" ns=${ns}></foxy-i18n>\n        </vaadin-checkbox>\n\n        ${this.renderTemplateOrSlot('visibility:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderTimestamps = () => {\n    const items = (['date_modified', 'date_created'] as const).map(field => ({\n      name: this.t(field),\n      value: this.t('date', { value: new Date(this.data![field]) }),\n    }));\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('timestamps:before')}\n        <x-property-table .items=${items} data-testid=\"timestamps\"></x-property-table>\n        ${this.renderTemplateOrSlot('timestamps:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderDelete = () => {\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('delete:before')}\n\n        <vaadin-button\n          class=\"w-full\"\n          data-testid=\"delete\"\n          theme=\"error primary\"\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}\n          @click=${this.__handleDeleteClick}\n        >\n          <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"delete\"></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('delete:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderCreate = () => {\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('create:before')}\n\n        <vaadin-button\n          data-testid=\"create\"\n          class=\"w-full\"\n          theme=\"success primary\"\n          ?disabled=${!this.in('idle') || !isValid || this.disabledSelector.matches('create', true)}\n          @click=${() => this.submit()}\n        >\n          <foxy-i18n ns=${this.ns} lang=${this.lang} key=\"create\"></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('create:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const { hiddenSelector, data, lang, ns } = this;\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n\n    return html`\n      <foxy-internal-confirm-dialog\n        data-testid=\"confirm\"\n        message=\"delete_prompt\"\n        confirm=\"delete\"\n        cancel=\"cancel\"\n        header=\"delete\"\n        theme=\"primary error\"\n        lang=${lang}\n        ns=${ns}\n        id=\"confirm\"\n        @hide=${this.__handleConfirmHide}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div class=\"relative\" aria-busy=${this.in('busy')} aria-live=\"polite\">\n        <div class=\"grid grid-cols-1 gap-l\">\n          ${this.__maybeRenderTextField({ field: 'name' })}\n          ${this.__maybeRenderTextField({ field: 'value' })}\n          ${hiddenSelector.matches('visibility', true) ? '' : this.__renderVisibility()}\n          ${hiddenSelector.matches('timestamps', true) || !data ? '' : this.__renderTimestamps()}\n          ${hiddenSelector.matches('delete', true) || !data ? '' : this.__renderDelete()}\n          ${hiddenSelector.matches('create', true) || data ? '' : this.__renderCreate()}\n        </div>\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition duration-500 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !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' : isBusy ? 'busy' : 'empty'}\n            lang=${lang}\n            ns=${ns}\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__bindField.cache.clear?.();\n    this.__getValidator.cache.clear?.();\n  }\n\n  private get __confirmDialog(): InternalConfirmDialog {\n    return this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\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')).toString() : '';\n  }\n\n  private __handleKeyDown(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') this.submit();\n  }\n\n  private __handleDeleteClick(evt: Event) {\n    this.__confirmDialog.show(evt.currentTarget as HTMLElement);\n  }\n\n  private __handleConfirmHide(evt: DialogHideEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n}\n"]}

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

@@ -0,0 +1,9 @@
+import '@vaadin/vaadin-text-field';
+import '@vaadin/vaadin-checkbox';
+import '@vaadin/vaadin-button';
+import '../../internal/InternalConfirmDialog/index';
+import '../../internal/InternalSandbox/index';
+import '../Spinner/index';
+import '../I18n/index';
+import { CustomFieldForm } from './CustomFieldForm';
+export { CustomFieldForm };

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

@@ -0,0 +1,11 @@
+import '@vaadin/vaadin-text-field';
+import '@vaadin/vaadin-checkbox';
+import '@vaadin/vaadin-button';
+import "../../internal/InternalConfirmDialog/index.js";
+import "../../internal/InternalSandbox/index.js";
+import "../Spinner/index.js";
+import "../I18n/index.js";
+import { CustomFieldForm } from "./CustomFieldForm.js";
+customElements.define('foxy-custom-field-form', CustomFieldForm);
+export { CustomFieldForm };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,uDAAoD;AACpD,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,eAAe,EAAE,6BAA0B;AAEpD,cAAc,CAAC,MAAM,CAAC,wBAAwB,EAAE,eAAe,CAAC,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-text-field';\nimport '@vaadin/vaadin-checkbox';\nimport '@vaadin/vaadin-button';\nimport '../../internal/InternalConfirmDialog/index';\nimport '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { CustomFieldForm } from './CustomFieldForm';\n\ncustomElements.define('foxy-custom-field-form', CustomFieldForm);\n\nexport { CustomFieldForm };\n"]}

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

@@ -0,0 +1,22 @@
+import { CustomFieldForm } from './CustomFieldForm';
+import { Rels } from '@foxy.io/sdk/backend';
+import { Renderer } from '../../../mixins/configurable';
+import { Resource } from '@foxy.io/sdk/core';
+export declare type Data = Resource<Rels.CustomField>;
+export declare type TextFieldParams = {
+    field: keyof Data;
+};
+export declare type Templates = {
+    'name:before'?: Renderer<CustomFieldForm>;
+    'name:after'?: Renderer<CustomFieldForm>;
+    'value:before'?: Renderer<CustomFieldForm>;
+    'value:after'?: Renderer<CustomFieldForm>;
+    'visibility:before'?: Renderer<CustomFieldForm>;
+    'visibility:after'?: Renderer<CustomFieldForm>;
+    'timestamps:before'?: Renderer<CustomFieldForm>;
+    'timestamps:after'?: Renderer<CustomFieldForm>;
+    'delete:before'?: Renderer<CustomFieldForm>;
+    'delete:after'?: Renderer<CustomFieldForm>;
+    'create:before'?: Renderer<CustomFieldForm>;
+    'create:after'?: Renderer<CustomFieldForm>;
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/CustomFieldForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { CustomFieldForm } from './CustomFieldForm';\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.CustomField>;\nexport type TextFieldParams = { field: keyof Data };\nexport type Templates = {\n  'name:before'?: Renderer<CustomFieldForm>;\n  'name:after'?: Renderer<CustomFieldForm>;\n  'value:before'?: Renderer<CustomFieldForm>;\n  'value:after'?: Renderer<CustomFieldForm>;\n  'visibility:before'?: Renderer<CustomFieldForm>;\n  'visibility:after'?: Renderer<CustomFieldForm>;\n  'timestamps:before'?: Renderer<CustomFieldForm>;\n  'timestamps:after'?: Renderer<CustomFieldForm>;\n  'delete:before'?: Renderer<CustomFieldForm>;\n  'delete:after'?: Renderer<CustomFieldForm>;\n  'create:before'?: Renderer<CustomFieldForm>;\n  'create:after'?: Renderer<CustomFieldForm>;\n};\n"]}

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

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