@foxy.io/elements 1.18.0-beta.2 → 1.18.0-beta.20

package/dist/elements/public/TemplateSetCard/TemplateSetCard.js

@@ -0,0 +1,26 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { TwoLineCard } from "../CustomFieldCard/TwoLineCard.js";
+import { html } from 'lit-html';
+const NS = 'template-set-card';
+const Base = TranslatableMixin(TwoLineCard, NS);
+/**
+ * Card element representing a template set (`fx:template_set`).
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-template-set-card
+ * @since 1.21.0
+ */
+export class TemplateSetCard extends Base {
+    render() {
+        return super.render({
+            title: data => html `${data.description}`,
+            subtitle: data => html `${data.code}`,
+        });
+    }
+}
+//# sourceMappingURL=TemplateSetCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateSetCard.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateSetCard/TemplateSetCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,mBAAmB,CAAC;AAC/B,MAAM,IAAI,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AAEhD;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,eAAgB,SAAQ,IAAU;IAC7C,MAAM;QACJ,OAAO,KAAK,CAAC,MAAM,CAAC;YAClB,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,EAAE;YACxC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,EAAE;SACrC,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\nimport { html } from 'lit-html';\n\nconst NS = 'template-set-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/**\n * Card element representing a template set (`fx:template_set`).\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @element foxy-template-set-card\n * @since 1.21.0\n */\nexport class TemplateSetCard extends Base<Data> {\n  render(): TemplateResult {\n    return super.render({\n      title: data => html`${data.description}`,\n      subtitle: data => html`${data.code}`,\n    });\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateSetCard/index.ts"],"names":[],"mappings":"AAAA,iDAA8C;AAE9C,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';\n\nimport '../Spinner/index';\n\nimport { TemplateSetCard } from './TemplateSetCard';\n\ncustomElements.define('foxy-template-set-card', TemplateSetCard);\n\nexport { TemplateSetCard };\n"]}

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

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

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

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

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

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

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

@@ -0,0 +1,26 @@
+import type { CSSResultArray, PropertyDeclarations } from 'lit-element';
+import type { PaymentsApiPaymentPresetForm } from '../PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm';
+import type { TemplateConfigForm } from '../TemplateConfigForm/TemplateConfigForm';
+import type { TemplateResult } from 'lit-html';
+import type { NucleonV8N } from '../NucleonElement/types';
+import type { Data } from './types';
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { InternalForm } from '../../internal/InternalForm/InternalForm';
+declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+export declare class TemplateSetForm extends Base<Data> {
+    static get properties(): PropertyDeclarations;
+    static get styles(): CSSResultArray;
+    static get v8n(): NucleonV8N<Data>;
+    paymentMethodSets: string | null;
+    languageStrings: string | null;
+    localeCodes: string | null;
+    languages: string | null;
+    get hiddenSelector(): BooleanSelector;
+    get readonlySelector(): BooleanSelector;
+    get templateConfigForm(): TemplateConfigForm | null;
+    get paymentsApiPaymentPresetForm(): PaymentsApiPaymentPresetForm | null;
+    renderBody(): TemplateResult;
+}
+export {};

package/dist/elements/public/TemplateSetForm/TemplateSetForm.js

@@ -0,0 +1,156 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html, css } from 'lit-element';
+const NS = 'template-set-form';
+const Base = TranslatableMixin(InternalForm, NS);
+export class TemplateSetForm extends Base {
+    constructor() {
+        super(...arguments);
+        this.paymentMethodSets = null;
+        this.languageStrings = 'https://demo.api/hapi/property_helpers/10';
+        this.localeCodes = null;
+        this.languages = null;
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            paymentMethodSets: { attribute: 'payment-method-sets' },
+            languageStrings: { attribute: 'language-strings' },
+            localeCodes: { attribute: 'locale-codes' },
+            languages: {},
+        };
+    }
+    static get styles() {
+        return [
+            super.styles,
+            css `vaadin-button::part(label){
+  flex:1;
+  padding:0;
+}
+
+.grid-cols-16rem{
+  grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
+}
+      `,
+        ];
+    }
+    static get v8n() {
+        return [
+            ({ description: v }) => !!v || 'description:v8n_required',
+            ({ description: v }) => (!!v && v.length <= 100) || 'description:v8n_too_long',
+            ({ code: v }) => !!v || 'code:v8n_required',
+            ({ code: v }) => (!!v && v.length <= 50) || 'code:v8n_too_long',
+            ({ language: v }) => !!v || 'language:v8n_required',
+            ({ locale_code: v }) => !!v || 'locale_code:v8n_required',
+        ];
+    }
+    get hiddenSelector() {
+        var _a;
+        const alwaysHidden = [
+            'cart-template-uri:not=content',
+            'cart-include-template-uri:not=content',
+            'email-template-uri:not=content,template-language',
+            'checkout-template-uri:not=content',
+            'receipt-template-uri:not=content',
+            'config:payment-method-set-uri:delete',
+            'config:payment-method-set-uri:create',
+            'config:payment-method-set-uri:timestamps',
+            'config:payment-method-set-uri:description',
+            'config:template-dialog:description',
+            'config:template-dialog:delete',
+        ];
+        if (((_a = this.data) === null || _a === void 0 ? void 0 : _a.code) === 'DEFAULT')
+            alwaysHidden.push('delete');
+        return new BooleanSelector(`${alwaysHidden.join(' ')} ${super.hiddenSelector.toString()}`);
+    }
+    get readonlySelector() {
+        var _a;
+        const alwaysReadonly = [];
+        if (((_a = this.data) === null || _a === void 0 ? void 0 : _a.code) === 'DEFAULT')
+            alwaysReadonly.push('code', 'description');
+        return new BooleanSelector(`${alwaysReadonly.join(' ')} ${super.readonlySelector.toString()}`);
+    }
+    get templateConfigForm() {
+        return this.renderRoot.querySelector('foxy-template-config-form');
+    }
+    get paymentsApiPaymentPresetForm() {
+        return this.renderRoot.querySelector('foxy-payments-api-payment-preset-form');
+    }
+    renderBody() {
+        var _a, _b, _c, _d;
+        const localeCodesLoader = this.renderRoot.querySelector('#localeCodes');
+        const localeCodes = localeCodesLoader === null || localeCodesLoader === void 0 ? void 0 : localeCodesLoader.data;
+        const localeCodeEntries = Object.entries((_a = localeCodes === null || localeCodes === void 0 ? void 0 : localeCodes.values) !== null && _a !== void 0 ? _a : {});
+        const localeCodeOptions = localeCodeEntries.map(([value, label]) => ({ value, label }));
+        const languagesLoader = this.renderRoot.querySelector('#languages');
+        const languages = languagesLoader === null || languagesLoader === void 0 ? void 0 : languagesLoader.data;
+        const languageEntries = Object.entries((_b = languages === null || languages === void 0 ? void 0 : languages.values) !== null && _b !== void 0 ? _b : {});
+        const languageOptions = languageEntries.map(([value, label]) => ({ value, label }));
+        const paymentMethodSetLoader = this.renderRoot.querySelector('#paymentMethodSet');
+        const paymentMethodSet = paymentMethodSetLoader === null || paymentMethodSetLoader === void 0 ? void 0 : paymentMethodSetLoader.data;
+        return html `
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined((_c = this.languages) !== null && _c !== void 0 ? _c : undefined)}
+        id="languages"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined((_d = this.localeCodes) !== null && _d !== void 0 ? _d : undefined)}
+        id="localeCodes"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.form.payment_method_set_uri)}
+        id="paymentMethodSet"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <div class="grid grid-cols-16rem gap-m">
+        <foxy-internal-text-control infer="description"></foxy-internal-text-control>
+        <foxy-internal-text-control infer="code"></foxy-internal-text-control>
+
+        <foxy-internal-select-control infer="language" .options=${languageOptions}>
+        </foxy-internal-select-control>
+
+        <foxy-internal-select-control infer="locale-code" .options=${localeCodeOptions}>
+        </foxy-internal-select-control>
+      </div>
+
+      <foxy-internal-async-combo-box-control
+        item-label-path="description"
+        item-id-path="_links.self.href"
+        infer="payment-method-set-uri"
+        first=${this.paymentMethodSets}
+        .selectedItem=${paymentMethodSet}
+      >
+      </foxy-internal-async-combo-box-control>
+
+      ${this.data && this.languageStrings
+            ? html `
+            <foxy-i18n-editor
+              language-overrides=${this.data._links['fx:language_overrides'].href}
+              selected-language=${this.form.language}
+              infer="i18n-editor"
+              href=${this.languageStrings}
+            >
+            </foxy-i18n-editor>
+          `
+            : ''}
+      ${super.renderBody()}
+    `;
+    }
+}
+//# sourceMappingURL=TemplateSetForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateSetForm.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateSetForm/TemplateSetForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations } from 'lit-element';\nimport type { PaymentsApiPaymentPresetForm } from '../PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm';\nimport type { TemplateConfigForm } from '../TemplateConfigForm/TemplateConfigForm';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, css } from 'lit-element';\n\nconst NS = 'template-set-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\nexport class TemplateSetForm extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      paymentMethodSets: { attribute: 'payment-method-sets' },\n      languageStrings: { attribute: 'language-strings' },\n      localeCodes: { attribute: 'locale-codes' },\n      languages: {},\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        vaadin-button::part(label) {\n          flex: 1;\n          padding: 0;\n        }\n\n        .grid-cols-16rem {\n          grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));\n        }\n      `,\n    ];\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ description: v }) => !!v || 'description:v8n_required',\n      ({ description: v }) => (!!v && v.length <= 100) || 'description:v8n_too_long',\n      ({ code: v }) => !!v || 'code:v8n_required',\n      ({ code: v }) => (!!v && v.length <= 50) || 'code:v8n_too_long',\n      ({ language: v }) => !!v || 'language:v8n_required',\n      ({ locale_code: v }) => !!v || 'locale_code:v8n_required',\n    ];\n  }\n\n  paymentMethodSets: string | null = null;\n\n  languageStrings: string | null = 'https://demo.api/hapi/property_helpers/10';\n\n  localeCodes: string | null = null;\n\n  languages: string | null = null;\n\n  get hiddenSelector(): BooleanSelector {\n    const alwaysHidden = [\n      'cart-template-uri:not=content',\n      'cart-include-template-uri:not=content',\n      'email-template-uri:not=content,template-language',\n      'checkout-template-uri:not=content',\n      'receipt-template-uri:not=content',\n      'config:payment-method-set-uri:delete',\n      'config:payment-method-set-uri:create',\n      'config:payment-method-set-uri:timestamps',\n      'config:payment-method-set-uri:description',\n      'config:template-dialog:description',\n      'config:template-dialog:delete',\n    ];\n\n    if (this.data?.code === 'DEFAULT') alwaysHidden.push('delete');\n\n    return new BooleanSelector(`${alwaysHidden.join(' ')} ${super.hiddenSelector.toString()}`);\n  }\n\n  get readonlySelector(): BooleanSelector {\n    const alwaysReadonly: string[] = [];\n    if (this.data?.code === 'DEFAULT') alwaysReadonly.push('code', 'description');\n    return new BooleanSelector(`${alwaysReadonly.join(' ')} ${super.readonlySelector.toString()}`);\n  }\n\n  get templateConfigForm(): TemplateConfigForm | null {\n    return this.renderRoot.querySelector('foxy-template-config-form');\n  }\n\n  get paymentsApiPaymentPresetForm(): PaymentsApiPaymentPresetForm | null {\n    return this.renderRoot.querySelector('foxy-payments-api-payment-preset-form');\n  }\n\n  renderBody(): TemplateResult {\n    type LocaleCodesLoader = NucleonElement<Resource<Rels.LocaleCodes>>;\n    type LanguagesLoader = NucleonElement<Resource<Rels.Languages>>;\n    type PMSetLoader = NucleonElement<Resource<Rels.PaymentMethodSet>>;\n\n    const localeCodesLoader = this.renderRoot.querySelector<LocaleCodesLoader>('#localeCodes');\n    const localeCodes = localeCodesLoader?.data;\n    const localeCodeEntries = Object.entries(localeCodes?.values ?? {});\n    const localeCodeOptions = localeCodeEntries.map(([value, label]) => ({ value, label }));\n\n    const languagesLoader = this.renderRoot.querySelector<LanguagesLoader>('#languages');\n    const languages = languagesLoader?.data;\n    const languageEntries = Object.entries(languages?.values ?? {});\n    const languageOptions = languageEntries.map(([value, label]) => ({ value, label }));\n\n    const paymentMethodSetLoader = this.renderRoot.querySelector<PMSetLoader>('#paymentMethodSet');\n    const paymentMethodSet = paymentMethodSetLoader?.data;\n\n    return html`\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.languages ?? undefined)}\n        id=\"languages\"\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.localeCodes ?? undefined)}\n        id=\"localeCodes\"\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.form.payment_method_set_uri)}\n        id=\"paymentMethodSet\"\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <div class=\"grid grid-cols-16rem gap-m\">\n        <foxy-internal-text-control infer=\"description\"></foxy-internal-text-control>\n        <foxy-internal-text-control infer=\"code\"></foxy-internal-text-control>\n\n        <foxy-internal-select-control infer=\"language\" .options=${languageOptions}>\n        </foxy-internal-select-control>\n\n        <foxy-internal-select-control infer=\"locale-code\" .options=${localeCodeOptions}>\n        </foxy-internal-select-control>\n      </div>\n\n      <foxy-internal-async-combo-box-control\n        item-label-path=\"description\"\n        item-id-path=\"_links.self.href\"\n        infer=\"payment-method-set-uri\"\n        first=${this.paymentMethodSets}\n        .selectedItem=${paymentMethodSet}\n      >\n      </foxy-internal-async-combo-box-control>\n\n      ${this.data && this.languageStrings\n        ? html`\n            <foxy-i18n-editor\n              language-overrides=${this.data._links['fx:language_overrides'].href}\n              selected-language=${this.form.language}\n              infer=\"i18n-editor\"\n              href=${this.languageStrings}\n            >\n            </foxy-i18n-editor>\n          `\n        : ''}\n      ${super.renderBody()}\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,8 @@
+import '../../internal/InternalAsyncComboBoxControl/index';
+import '../../internal/InternalSelectControl/index';
+import '../../internal/InternalTextControl/index';
+import '../../internal/InternalForm/index';
+import '../NucleonElement/index';
+import '../I18nEditor/index';
+import { TemplateSetForm } from './TemplateSetForm';
+export { TemplateSetForm };

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

@@ -0,0 +1,10 @@
+import "../../internal/InternalAsyncComboBoxControl/index.js";
+import "../../internal/InternalSelectControl/index.js";
+import "../../internal/InternalTextControl/index.js";
+import "../../internal/InternalForm/index.js";
+import "../NucleonElement/index.js";
+import "../I18nEditor/index.js";
+import { TemplateSetForm } from "./TemplateSetForm.js";
+customElements.define('foxy-template-set-form', TemplateSetForm);
+export { TemplateSetForm };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateSetForm/index.ts"],"names":[],"mappings":"AAAA,8DAA2D;AAC3D,uDAAoD;AACpD,qDAAkD;AAClD,8CAA2C;AAE3C,oCAAiC;AACjC,gCAA6B;AAE7B,OAAO,EAAE,eAAe,EAAE,6BAA0B;AAEpD,cAAc,CAAC,MAAM,CAAC,wBAAwB,EAAE,eAAe,CAAC,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import '../../internal/InternalAsyncComboBoxControl/index';\nimport '../../internal/InternalSelectControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalForm/index';\n\nimport '../NucleonElement/index';\nimport '../I18nEditor/index';\n\nimport { TemplateSetForm } from './TemplateSetForm';\n\ncustomElements.define('foxy-template-set-form', TemplateSetForm);\n\nexport { TemplateSetForm };\n"]}

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

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

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

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

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

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

package/dist/elements/public/TransactionCard/TransactionCard.js

@@ -36,7 +36,7 @@ class TransactionCard extends Base {
       <div
         aria-busy=${this.in('busy')}
         aria-live="polite"
-        class="relative leading-m font-lumo text-m"
+        class="relative leading-s font-lumo text-m"
       >
         <div class=${classMap({ 'transition-opacity': true, 'opacity-0': !this.data })}>
           ${hasTotal || hasStatus

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

@@ -1 +1 @@
-{"version":3,"file":"TransactionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/TransactionCard/TransactionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'transaction-card';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Basic card displaying a transaction.\n *\n * @slot total:before\n * @slot total:after\n * @slot status:before\n * @slot status:after\n * @slot description:before\n * @slot description:after\n * @slot customer:before\n * @slot customer:after\n *\n * @element foxy-transaction-card\n * @since 1.12.0\n */\nclass TransactionCard extends Base<Data> {\n  templates: Templates = {};\n\n  private __currencyDisplay = '';\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const hasTotal = !hiddenSelector.matches('total', true);\n    const hasStatus = !hiddenSelector.matches('status', true);\n\n    return html`\n      <div\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative leading-m font-lumo text-m\"\n      >\n        <div class=${classMap({ 'transition-opacity': true, 'opacity-0': !this.data })}>\n          ${hasTotal || hasStatus\n            ? html`\n                <div class=\"flex items-center justify-between\">\n                  ${hasTotal ? this.__renderTotal() : ''} ${hasStatus ? this.__renderStatus() : ''}\n                </div>\n              `\n            : ''}\n          ${hiddenSelector.matches('description', true) ? '' : this.__renderDescription()}\n          ${hiddenSelector.matches('customer', true) ? '' : this.__renderCustomer()}\n        </div>\n\n        <div\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition-opacity': true,\n            'opacity-0': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            class=\"m-auto\"\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  protected async _sendGet(): Promise<Data> {\n    type Store = Resource<Rels.Store>;\n\n    const transaction = await super._sendGet();\n    const store = await super._fetch<Store>(transaction._links['fx:store'].href);\n\n    this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n\n    return transaction;\n  }\n\n  private __renderTotal() {\n    const data = this.data;\n    let content: TemplateResult;\n\n    if (data) {\n      const amount = `${data.total_order} ${data.currency_code}`;\n      const currencyDisplay = this.__currencyDisplay;\n\n      content = html`\n        <foxy-i18n\n          options=${JSON.stringify({ amount, currencyDisplay })}\n          lang=${this.lang}\n          key=\"price\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n      `;\n    } else {\n      content = html`&ZeroWidthSpace;`;\n    }\n\n    return html`\n      <div data-testid=\"total\">\n        ${this.renderTemplateOrSlot('total:before')}\n        <div class=\"font-semibold truncate\">${content}</div>\n        ${this.renderTemplateOrSlot('total:after')}\n      </div>\n    `;\n  }\n\n  private __renderStatus() {\n    const specialIcons: Record<string, string> = {\n      completed: 'icons:done-all',\n      refunded: 'icons:restore',\n      rejected: 'icons:highlight-off',\n      declined: 'icons:highlight-off',\n      voided: 'icons:remove-circle-outline',\n    };\n\n    const specialColors: Record<string, string> = {\n      completed: 'text-success',\n      rejected: 'text-error',\n      declined: 'text-error',\n    };\n\n    const status = this.data?.status || 'completed';\n\n    return html`\n      <div data-testid=\"status\">\n        ${this.renderTemplateOrSlot('status:before')}\n\n        <div class=\"text-tertiary text-s flex items-center space-x-s\">\n          <foxy-i18n\n            options=${JSON.stringify({ value: this.data?.transaction_date })}\n            lang=${this.lang}\n            key=\"time\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n\n          <iron-icon\n            data-testid=\"status-icon\"\n            class=\"icon-inline text-l ${specialColors[status] ?? 'text-tertiary'}\"\n            title=${this.t(`transaction_${status}`)}\n            icon=${specialIcons[status] ?? 'icons:schedule'}\n          >\n          </iron-icon>\n        </div>\n\n        ${this.renderTemplateOrSlot('status:after')}\n      </div>\n    `;\n  }\n\n  private __renderDescription() {\n    const items = this.data?._embedded?.['fx:items'];\n    let content: TemplateResult;\n\n    if (items) {\n      const options = {\n        most_expensive_item: [...items].sort((a, b) => a.price - b.price)[0],\n        count: items.length,\n      };\n\n      content = html`\n        <foxy-i18n\n          options=${JSON.stringify(options)}\n          lang=${this.lang}\n          key=\"transaction_summary\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n      `;\n    } else {\n      content = html`&ZeroWidthSpace;`;\n    }\n\n    return html`\n      <div data-testid=\"description\">\n        ${this.renderTemplateOrSlot('description:before')}\n        <div class=\"text-s text-secondary truncate\">${content}</div>\n        ${this.renderTemplateOrSlot('description:after')}\n      </div>\n    `;\n  }\n\n  private __renderCustomer() {\n    const data = this.data;\n    const content = data\n      ? html`${data.customer_first_name} ${data.customer_last_name} (${data.customer_email})`\n      : html`&ZeroWidthSpace;`;\n\n    return html`\n      <div data-testid=\"customer\">\n        ${this.renderTemplateOrSlot('customer:before')}\n        <div class=\"text-tertiary truncate text-s\">${content}</div>\n        ${this.renderTemplateOrSlot('customer:after')}\n      </div>\n    `;\n  }\n}\n\nexport { TransactionCard };\n"]}
+{"version":3,"file":"TransactionCard.js","sourceRoot":"","sources":["../../../../src/elements/public/TransactionCard/TransactionCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { Data, Templates } from './types';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'transaction-card';\nconst Base = ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)));\n\n/**\n * Basic card displaying a transaction.\n *\n * @slot total:before\n * @slot total:after\n * @slot status:before\n * @slot status:after\n * @slot description:before\n * @slot description:after\n * @slot customer:before\n * @slot customer:after\n *\n * @element foxy-transaction-card\n * @since 1.12.0\n */\nclass TransactionCard extends Base<Data> {\n  templates: Templates = {};\n\n  private __currencyDisplay = '';\n\n  render(): TemplateResult {\n    const hiddenSelector = this.hiddenSelector;\n    const hasTotal = !hiddenSelector.matches('total', true);\n    const hasStatus = !hiddenSelector.matches('status', true);\n\n    return html`\n      <div\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"relative leading-s font-lumo text-m\"\n      >\n        <div class=${classMap({ 'transition-opacity': true, 'opacity-0': !this.data })}>\n          ${hasTotal || hasStatus\n            ? html`\n                <div class=\"flex items-center justify-between\">\n                  ${hasTotal ? this.__renderTotal() : ''} ${hasStatus ? this.__renderStatus() : ''}\n                </div>\n              `\n            : ''}\n          ${hiddenSelector.matches('description', true) ? '' : this.__renderDescription()}\n          ${hiddenSelector.matches('customer', true) ? '' : this.__renderCustomer()}\n        </div>\n\n        <div\n          class=${classMap({\n            'pointer-events-none absolute inset-0 flex transition-opacity': true,\n            'opacity-0': !!this.data,\n          })}\n        >\n          <foxy-spinner\n            data-testid=\"spinner\"\n            state=${this.in('fail') ? 'error' : this.in({ idle: 'template' }) ? 'empty' : 'busy'}\n            class=\"m-auto\"\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  protected async _sendGet(): Promise<Data> {\n    type Store = Resource<Rels.Store>;\n\n    const transaction = await super._sendGet();\n    const store = await super._fetch<Store>(transaction._links['fx:store'].href);\n\n    this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n\n    return transaction;\n  }\n\n  private __renderTotal() {\n    const data = this.data;\n    let content: TemplateResult;\n\n    if (data) {\n      const amount = `${data.total_order} ${data.currency_code}`;\n      const currencyDisplay = this.__currencyDisplay;\n\n      content = html`\n        <foxy-i18n\n          options=${JSON.stringify({ amount, currencyDisplay })}\n          lang=${this.lang}\n          key=\"price\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n      `;\n    } else {\n      content = html`&ZeroWidthSpace;`;\n    }\n\n    return html`\n      <div data-testid=\"total\">\n        ${this.renderTemplateOrSlot('total:before')}\n        <div class=\"font-semibold truncate\">${content}</div>\n        ${this.renderTemplateOrSlot('total:after')}\n      </div>\n    `;\n  }\n\n  private __renderStatus() {\n    const specialIcons: Record<string, string> = {\n      completed: 'icons:done-all',\n      refunded: 'icons:restore',\n      rejected: 'icons:highlight-off',\n      declined: 'icons:highlight-off',\n      voided: 'icons:remove-circle-outline',\n    };\n\n    const specialColors: Record<string, string> = {\n      completed: 'text-success',\n      rejected: 'text-error',\n      declined: 'text-error',\n    };\n\n    const status = this.data?.status || 'completed';\n\n    return html`\n      <div data-testid=\"status\">\n        ${this.renderTemplateOrSlot('status:before')}\n\n        <div class=\"text-tertiary text-s flex items-center space-x-s\">\n          <foxy-i18n\n            options=${JSON.stringify({ value: this.data?.transaction_date })}\n            lang=${this.lang}\n            key=\"time\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n\n          <iron-icon\n            data-testid=\"status-icon\"\n            class=\"icon-inline text-l ${specialColors[status] ?? 'text-tertiary'}\"\n            title=${this.t(`transaction_${status}`)}\n            icon=${specialIcons[status] ?? 'icons:schedule'}\n          >\n          </iron-icon>\n        </div>\n\n        ${this.renderTemplateOrSlot('status:after')}\n      </div>\n    `;\n  }\n\n  private __renderDescription() {\n    const items = this.data?._embedded?.['fx:items'];\n    let content: TemplateResult;\n\n    if (items) {\n      const options = {\n        most_expensive_item: [...items].sort((a, b) => a.price - b.price)[0],\n        count: items.length,\n      };\n\n      content = html`\n        <foxy-i18n\n          options=${JSON.stringify(options)}\n          lang=${this.lang}\n          key=\"transaction_summary\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n      `;\n    } else {\n      content = html`&ZeroWidthSpace;`;\n    }\n\n    return html`\n      <div data-testid=\"description\">\n        ${this.renderTemplateOrSlot('description:before')}\n        <div class=\"text-s text-secondary truncate\">${content}</div>\n        ${this.renderTemplateOrSlot('description:after')}\n      </div>\n    `;\n  }\n\n  private __renderCustomer() {\n    const data = this.data;\n    const content = data\n      ? html`${data.customer_first_name} ${data.customer_last_name} (${data.customer_email})`\n      : html`&ZeroWidthSpace;`;\n\n    return html`\n      <div data-testid=\"customer\">\n        ${this.renderTemplateOrSlot('customer:before')}\n        <div class=\"text-tertiary truncate text-s\">${content}</div>\n        ${this.renderTemplateOrSlot('customer:after')}\n      </div>\n    `;\n  }\n}\n\nexport { TransactionCard };\n"]}

package/dist/elements/public/UserForm/UserForm.js

@@ -129,7 +129,7 @@ export class UserForm extends Base {
 
         <vaadin-button
           data-testid="action"
-          theme=${this.in('idle') ? `primary ${this.href ? 'error' : 'success'}` : ''}
+          theme=${this.in('idle') ? `${this.href ? 'error' : 'primary success'}` : ''}
           class="w-full"
           ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled}
           @click=${this.__handleActionClick}

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

@@ -1 +1 @@
-{"version":3,"file":"UserForm.js","sourceRoot":"","sources":["../../../../src/elements/public/UserForm/UserForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Checkbox, Group } from '../../private/index';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { Data } from './types';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { validate as isEmail } from 'email-validator';\nimport memoize from 'lodash-es/memoize';\nimport { roles } from './roles';\n\nconst Base = ScopedElementsMixin(\n  ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, 'user-form')))\n);\n\nexport class UserForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'x-checkbox': Checkbox,\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'x-group': Group,\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ first_name: v }) => !v || v.length <= 50 || 'first_name_too_long',\n      ({ last_name: v }) => !v || v.length <= 50 || 'last_name_too_long',\n      ({ email: v }) => (v && v.length > 0) || 'email_required',\n      ({ email: v }) => (v && v.length <= 100) || 'email_too_long',\n      ({ email: v }) => (v && isEmail(v)) || 'email_invalid_email',\n      ({ phone: v }) => !v || v.length <= 50 || 'phone_too_long',\n    ];\n  }\n\n  private __getValidator = memoize((prefix: string) => () => {\n    return !this.errors.some(err => err.startsWith(prefix));\n  });\n\n  private __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  render(): TemplateResult {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n    const isDisabled = isBusy || isFail || this.disabled;\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=${this.lang}\n        ns=${this.ns}\n        id=\"confirm\"\n        @hide=${this.__handleConfirmHide}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div\n        data-testid=\"wrapper\"\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"space-y-l relative\"\n      >\n        <div class=\"grid grid-cols-1 sm-grid-cols-2 gap-m\">\n          ${(['first_name', 'last_name', 'email', 'phone'] as const).map(\n            field => html`\n              <vaadin-text-field\n                error-message=${this.__getErrorMessage(field)}\n                data-testid=${field}\n                ?disabled=${isDisabled}\n                ?readonly=${this.readonly}\n                class=\"w-full\"\n                label=${this.t(field)}\n                value=${ifDefined((this.form as any)[field])}\n                .checkValidity=${this.__getValidator(field)}\n                @input=${this.__bindField(field)}\n                @keydown=${this.__handleKeyDown}\n              >\n              </vaadin-text-field>\n            `\n          )}\n        </div>\n\n        <x-group frame>\n          ${roles.map(\n            (role, index) => html`\n              <hr\n                class=${index > 0 ? 'border-contrast-10' : 'hidden'}\n                style=\"margin-left: calc((var(--lumo-space-m) * 2) + 1.125rem)\"\n              />\n\n              <x-checkbox\n                class=\"w-full p-m\"\n                ?readonly=${this.readonly}\n                ?disabled=${isDisabled}\n                ?checked=${this.form[role.property]}\n                @change=${(evt: CustomEvent) => {\n                  const checkbox = evt.target as Checkbox;\n                  this.edit({ [role.property]: checkbox.checked });\n                }}\n              >\n                <div class=\"flex items-start leading-s\">\n                  <div class=\"flex-1 flex flex-col\">\n                    <foxy-i18n key=${role.key} lang=${this.lang} ns=${this.ns}></foxy-i18n>\n                    <foxy-i18n\n                      class=\"text-s text-secondary\"\n                      lang=${this.lang}\n                      key=\"${role.key}_explainer\"\n                      ns=${this.ns}\n                    >\n                    </foxy-i18n>\n                  </div>\n\n                  <div class=\"mt-xs\" style=\"width: 1.125rem; height: 1.125rem;\">${role.icon}</div>\n                </div>\n              </x-checkbox>\n            `\n          )}\n        </x-group>\n\n        <vaadin-button\n          data-testid=\"action\"\n          theme=${this.in('idle') ? `primary ${this.href ? 'error' : 'success'}` : ''}\n          class=\"w-full\"\n          ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled}\n          @click=${this.__handleActionClick}\n        >\n          <foxy-i18n lang=${this.lang} key=${this.href ? 'delete' : 'create'} ns=${this.ns}>\n          </foxy-i18n>\n        </vaadin-button>\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=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private __getErrorMessage(prefix: string) {\n    const error = this.errors.find(err => err.startsWith(prefix));\n    return error ? this.t(error.replace(prefix, 'v8n')) : '';\n  }\n\n  private __handleActionClick(evt: Event) {\n    if (this.in({ idle: 'snapshot' })) {\n      const confirm = this.renderRoot.querySelector('#confirm');\n      (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n    } else {\n      this.submit();\n    }\n  }\n\n  private __handleConfirmHide(evt: CustomEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n\n  private __handleKeyDown(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') this.submit();\n  }\n}\n"]}
+{"version":3,"file":"UserForm.js","sourceRoot":"","sources":["../../../../src/elements/public/UserForm/UserForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Checkbox, Group } from '../../private/index';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-element';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { Data } from './types';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { NucleonV8N } from '../NucleonElement/types';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { validate as isEmail } from 'email-validator';\nimport memoize from 'lodash-es/memoize';\nimport { roles } from './roles';\n\nconst Base = ScopedElementsMixin(\n  ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, 'user-form')))\n);\n\nexport class UserForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'x-checkbox': Checkbox,\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'x-group': Group,\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ first_name: v }) => !v || v.length <= 50 || 'first_name_too_long',\n      ({ last_name: v }) => !v || v.length <= 50 || 'last_name_too_long',\n      ({ email: v }) => (v && v.length > 0) || 'email_required',\n      ({ email: v }) => (v && v.length <= 100) || 'email_too_long',\n      ({ email: v }) => (v && isEmail(v)) || 'email_invalid_email',\n      ({ phone: v }) => !v || v.length <= 50 || 'phone_too_long',\n    ];\n  }\n\n  private __getValidator = memoize((prefix: string) => () => {\n    return !this.errors.some(err => err.startsWith(prefix));\n  });\n\n  private __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  render(): TemplateResult {\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isValid = isTemplateValid || isSnapshotValid;\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n    const isDisabled = isBusy || isFail || this.disabled;\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=${this.lang}\n        ns=${this.ns}\n        id=\"confirm\"\n        @hide=${this.__handleConfirmHide}\n      >\n      </foxy-internal-confirm-dialog>\n\n      <div\n        data-testid=\"wrapper\"\n        aria-busy=${this.in('busy')}\n        aria-live=\"polite\"\n        class=\"space-y-l relative\"\n      >\n        <div class=\"grid grid-cols-1 sm-grid-cols-2 gap-m\">\n          ${(['first_name', 'last_name', 'email', 'phone'] as const).map(\n            field => html`\n              <vaadin-text-field\n                error-message=${this.__getErrorMessage(field)}\n                data-testid=${field}\n                ?disabled=${isDisabled}\n                ?readonly=${this.readonly}\n                class=\"w-full\"\n                label=${this.t(field)}\n                value=${ifDefined((this.form as any)[field])}\n                .checkValidity=${this.__getValidator(field)}\n                @input=${this.__bindField(field)}\n                @keydown=${this.__handleKeyDown}\n              >\n              </vaadin-text-field>\n            `\n          )}\n        </div>\n\n        <x-group frame>\n          ${roles.map(\n            (role, index) => html`\n              <hr\n                class=${index > 0 ? 'border-contrast-10' : 'hidden'}\n                style=\"margin-left: calc((var(--lumo-space-m) * 2) + 1.125rem)\"\n              />\n\n              <x-checkbox\n                class=\"w-full p-m\"\n                ?readonly=${this.readonly}\n                ?disabled=${isDisabled}\n                ?checked=${this.form[role.property]}\n                @change=${(evt: CustomEvent) => {\n                  const checkbox = evt.target as Checkbox;\n                  this.edit({ [role.property]: checkbox.checked });\n                }}\n              >\n                <div class=\"flex items-start leading-s\">\n                  <div class=\"flex-1 flex flex-col\">\n                    <foxy-i18n key=${role.key} lang=${this.lang} ns=${this.ns}></foxy-i18n>\n                    <foxy-i18n\n                      class=\"text-s text-secondary\"\n                      lang=${this.lang}\n                      key=\"${role.key}_explainer\"\n                      ns=${this.ns}\n                    >\n                    </foxy-i18n>\n                  </div>\n\n                  <div class=\"mt-xs\" style=\"width: 1.125rem; height: 1.125rem;\">${role.icon}</div>\n                </div>\n              </x-checkbox>\n            `\n          )}\n        </x-group>\n\n        <vaadin-button\n          data-testid=\"action\"\n          theme=${this.in('idle') ? `${this.href ? 'error' : 'primary success'}` : ''}\n          class=\"w-full\"\n          ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled}\n          @click=${this.__handleActionClick}\n        >\n          <foxy-i18n lang=${this.lang} key=${this.href ? 'delete' : 'create'} ns=${this.ns}>\n          </foxy-i18n>\n        </vaadin-button>\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=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private __getErrorMessage(prefix: string) {\n    const error = this.errors.find(err => err.startsWith(prefix));\n    return error ? this.t(error.replace(prefix, 'v8n')) : '';\n  }\n\n  private __handleActionClick(evt: Event) {\n    if (this.in({ idle: 'snapshot' })) {\n      const confirm = this.renderRoot.querySelector('#confirm');\n      (confirm as InternalConfirmDialog).show(evt.currentTarget as HTMLElement);\n    } else {\n      this.submit();\n    }\n  }\n\n  private __handleConfirmHide(evt: CustomEvent) {\n    if (!evt.detail.cancelled) this.delete();\n  }\n\n  private __handleKeyDown(evt: KeyboardEvent) {\n    if (evt.key === 'Enter') this.submit();\n  }\n}\n"]}

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

@@ -1,11 +1,16 @@
 export { AccessRecoveryForm } from './AccessRecoveryForm/AccessRecoveryForm';
 export { AddressCard } from './AddressCard/AddressCard';
 export { AddressForm } from './AddressForm/AddressForm';
+export { AdminSubscriptionCard } from './AdminSubscriptionCard/AdminSubscriptionCard';
 export { ApiBrowser } from './ApiBrowser/ApiBrowser';
+export { AppliedCouponCodeCard } from './AppliedCouponCodeCard/AppliedCouponCodeCard';
+export { AppliedCouponCodeForm } from './AppliedCouponCodeForm/AppliedCouponCodeForm';
 export { AppliedTaxCard } from './AppliedTaxCard/AppliedTaxCard';
 export { AttributeCard } from './AttributeCard/AttributeCard';
 export { AttributeForm } from './AttributeForm/AttributeForm';
 export { CancellationForm } from './CancellationForm/CancellationForm';
+export { CartCard } from './CartCard/CartCard';
+export { CartForm } from './CartForm/CartForm';
 export { CollectionPage } from './CollectionPage/CollectionPage';
 export { CollectionPages } from './CollectionPages/CollectionPages';
 export { CopyToClipboard } from './CopyToClipboard/CopyToClipboard';
@@ -29,15 +34,22 @@ export { DiscountDetailCard } from './DiscountDetailCard/DiscountDetailCard';
 export { ReportForm } from './ReportForm/ReportForm';
 export { ReportsTable } from './ReportsTable/ReportsTable';
 export { Donation } from './Donation/Donation';
+export { EmailTemplateCard } from './EmailTemplateCard/EmailTemplateCard';
 export { EmailTemplateForm } from './EmailTemplateForm/EmailTemplateForm';
 export { ErrorEntryCard } from './ErrorEntryCard/ErrorEntryCard';
 export { FormDialog } from './FormDialog/FormDialog';
 export { GenerateCodesForm } from './GenerateCodesForm/GenerateCodesForm';
 export { GiftCardCard } from './GiftCardCard/GiftCardCard';
 export { GiftCardCodeForm } from './GiftCardCodeForm/GiftCardCodeForm';
+export { GiftCardCodeLogCard } from './GiftCardCodeLogCard/GiftCardCodeLogCard';
 export { GiftCardCodesForm } from './GiftCardCodesForm/GiftCardCodesForm';
 export { GiftCardForm } from './GiftCardForm/GiftCardForm';
+export { ItemCategoryCard } from './ItemCategoryCard/ItemCategoryCard';
+export { ItemCategoryForm } from './ItemCategoryForm/ItemCategoryForm';
 export { I18n } from './I18n/I18n';
+export { I18nEditor } from './I18nEditor/I18nEditor';
+export { IntegrationCard } from './IntegrationCard/IntegrationCard';
+export { IntegrationForm } from './IntegrationForm/IntegrationForm';
 export { ItemCard } from './ItemCard/ItemCard';
 export { ItemForm } from './ItemForm/ItemForm';
 export { ItemOptionCard } from './ItemOptionCard/ItemOptionCard';
@@ -47,20 +59,31 @@ export { NucleonElement } from './NucleonElement/NucleonElement';
 export { Pagination } from './Pagination/Pagination';
 export { PaymentCard } from './PaymentCard/PaymentCard';
 export { ShipmentCard } from './ShipmentCard/ShipmentCard';
+export { ShippingMethodCard } from './ShippingMethodCard/ShippingMethodCard';
 export { PaymentMethodCard } from './PaymentMethodCard/PaymentMethodCard';
+export { PaymentsApi } from './PaymentsApi/PaymentsApi';
+export { PaymentsApiFraudProtectionCard } from './PaymentsApiFraudProtectionCard/PaymentsApiFraudProtectionCard';
+export { PaymentsApiFraudProtectionForm } from './PaymentsApiFraudProtectionForm/PaymentsApiFraudProtectionForm';
+export { PaymentsApiPaymentMethodCard } from './PaymentsApiPaymentMethodCard/PaymentsApiPaymentMethodCard';
+export { PaymentsApiPaymentMethodForm } from './PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm';
+export { PaymentsApiPaymentPresetCard } from './PaymentsApiPaymentPresetCard/PaymentsApiPaymentPresetCard';
+export { PaymentsApiPaymentPresetForm } from './PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm';
 export { QueryBuilder } from './QueryBuilder/QueryBuilder';
 export { SignInForm } from './SignInForm/SignInForm';
 export { Spinner } from './Spinner/Spinner';
-export { StoreShippingMethodCard } from './StoreShippingMethodCard/StoreShippingMethodCard';
+export { StoreForm } from './StoreForm/StoreForm';
 export { StoreShippingMethodForm } from './StoreShippingMethodForm/StoreShippingMethodForm';
 export { SubscriptionCard } from './SubscriptionCard/SubscriptionCard';
 export { SubscriptionForm } from './SubscriptionForm/SubscriptionForm';
+export { SubscriptionSettingsForm } from './SubscriptionSettingsForm/SubscriptionSettingsForm';
 export { SubscriptionsTable } from './SubscriptionsTable/SubscriptionsTable';
 export { SwipeActions } from './SwipeActions/SwipeActions';
 export { Table } from './Table/Table';
 export { TaxCard } from './TaxCard/TaxCard';
 export { TaxForm } from './TaxForm/TaxForm';
 export { TemplateForm } from './TemplateForm/TemplateForm';
+export { TemplateSetCard } from './TemplateSetCard/TemplateSetCard';
+export { TemplateSetForm } from './TemplateSetForm/TemplateSetForm';
 export { TemplateConfigForm } from './TemplateConfigForm/TemplateConfigForm';
 export { TransactionCard } from './TransactionCard/TransactionCard';
 export { Transaction } from './Transaction/Transaction';

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

@@ -1,11 +1,16 @@
 export { AccessRecoveryForm } from './AccessRecoveryForm/index';
 export { AddressCard } from './AddressCard/index';
 export { AddressForm } from './AddressForm/index';
+export { AdminSubscriptionCard } from './AdminSubscriptionCard/index';
 export { ApiBrowser } from './ApiBrowser/index';
+export { AppliedCouponCodeCard } from './AppliedCouponCodeCard/index';
+export { AppliedCouponCodeForm } from './AppliedCouponCodeForm/index';
 export { AppliedTaxCard } from './AppliedTaxCard/index';
 export { AttributeCard } from './AttributeCard/index';
 export { AttributeForm } from './AttributeForm/index';
 export { CancellationForm } from './CancellationForm/index';
+export { CartCard } from './CartCard/index';
+export { CartForm } from './CartForm/index';
 export { CollectionPage } from './CollectionPage/index';
 export { CollectionPages } from './CollectionPages/index';
 export { CopyToClipboard } from './CopyToClipboard/index';
@@ -29,15 +34,22 @@ export { DiscountDetailCard } from './DiscountDetailCard/index';
 export { ReportForm } from './ReportForm/index';
 export { ReportsTable } from './ReportsTable/index';
 export { Donation } from './Donation/index';
+export { EmailTemplateCard } from './EmailTemplateCard/index';
 export { EmailTemplateForm } from './EmailTemplateForm/index';
 export { ErrorEntryCard } from './ErrorEntryCard/index';
 export { FormDialog } from './FormDialog/index';
 export { GenerateCodesForm } from './GenerateCodesForm/index';
 export { GiftCardCard } from './GiftCardCard/index';
 export { GiftCardCodeForm } from './GiftCardCodeForm/index';
+export { GiftCardCodeLogCard } from './GiftCardCodeLogCard/index';
 export { GiftCardCodesForm } from './GiftCardCodesForm/index';
 export { GiftCardForm } from './GiftCardForm/index';
+export { ItemCategoryCard } from './ItemCategoryCard/index';
+export { ItemCategoryForm } from './ItemCategoryForm/index';
 export { I18n } from './I18n/index';
+export { I18nEditor } from './I18nEditor/index';
+export { IntegrationCard } from './IntegrationCard/index';
+export { IntegrationForm } from './IntegrationForm/index';
 export { ItemCard } from './ItemCard/index';
 export { ItemForm } from './ItemForm/index';
 export { ItemOptionCard } from './ItemOptionCard/index';
@@ -47,14 +59,23 @@ export { NucleonElement } from './NucleonElement/index';
 export { Pagination } from './Pagination/index';
 export { PaymentCard } from './PaymentCard/index';
 export { ShipmentCard } from './ShipmentCard/index';
+export { ShippingMethodCard } from './ShippingMethodCard/index';
 export { PaymentMethodCard } from './PaymentMethodCard/index';
+export { PaymentsApi } from './PaymentsApi/index';
+export { PaymentsApiFraudProtectionCard } from './PaymentsApiFraudProtectionCard/index';
+export { PaymentsApiFraudProtectionForm } from './PaymentsApiFraudProtectionForm/index';
+export { PaymentsApiPaymentMethodCard } from './PaymentsApiPaymentMethodCard/index';
+export { PaymentsApiPaymentMethodForm } from './PaymentsApiPaymentMethodForm/index';
+export { PaymentsApiPaymentPresetCard } from './PaymentsApiPaymentPresetCard/index';
+export { PaymentsApiPaymentPresetForm } from './PaymentsApiPaymentPresetForm/index';
 export { QueryBuilder } from './QueryBuilder/index';
 export { SignInForm } from './SignInForm/index';
 export { Spinner } from './Spinner/index';
-export { StoreShippingMethodCard } from './StoreShippingMethodCard/index';
+export { StoreForm } from './StoreForm/index';
 export { StoreShippingMethodForm } from './StoreShippingMethodForm/index';
 export { SubscriptionCard } from './SubscriptionCard/index';
 export { SubscriptionForm } from './SubscriptionForm/index';
+export { SubscriptionSettingsForm } from './SubscriptionSettingsForm/index';
 export { SubscriptionsTable } from './SubscriptionsTable/index';
 export { SwipeActions } from './SwipeActions/index';
 export { Table } from './Table/index';
@@ -62,6 +83,8 @@ export { TaxCard } from './TaxCard/index';
 export { TaxForm } from './TaxForm/index';
 export { TemplateConfigForm } from './TemplateConfigForm/index';
 export { TemplateForm } from './TemplateForm/index';
+export { TemplateSetCard } from './TemplateSetCard/index';
+export { TemplateSetForm } from './TemplateSetForm/index';
 export { TransactionCard } from './TransactionCard/index';
 export { Transaction } from './Transaction/index';
 export { TransactionsTable } from './TransactionsTable/index';