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

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,67 @@
+import type { PropertyDeclarations } from 'lit-element';
+import type { Data, Templates } from './types';
+import type { TemplateResult } from 'lit-html';
+import type { NucleonV8N } from '../NucleonElement/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;
+};
+/**
+ * Form element for creating and editing template sets (`fx:template_set`).
+ *
+ * @slot description:before
+ * @slot description:after
+ *
+ * @slot code:before
+ * @slot code:after
+ *
+ * @slot language:before
+ * @slot language:after
+ *
+ * @slot locale-code:before
+ * @slot locale-code:after
+ *
+ * @slot payment-method-set-uri:before
+ * @slot payment-method-set-uri:after
+ *
+ * @slot language-overrides:before
+ * @slot language-overrides:after
+ *
+ * @slot timestamps:before
+ * @slot timestamps:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @element foxy-template-set-form
+ * @since 1.21.0
+ */
+export declare class TemplateSetForm extends Base<Data> {
+    static get properties(): PropertyDeclarations;
+    static get v8n(): NucleonV8N<Data>;
+    /** URL of the store's `fx:payment_method_sets` collection (used to fill the relevant dropdown with options). */
+    paymentMethodSets: string | null;
+    /** URL of the `fx:language_strings` property helper (passed through to foxy-i18n-editor). */
+    languageStrings: string | null;
+    /** URL of the `fx:locale_codes` property helper (used to fill the relevant dropdown with options). */
+    localeCodes: string | null;
+    /** URL of the `fx:languages` property helper (used to fill the relevant dropdown with options). */
+    languages: string | null;
+    /** Template render functions mapped to their name. */
+    templates: Templates;
+    private readonly __paymentMethodSetLoaderId;
+    private readonly __localeCodesLoaderId;
+    private readonly __languagesLoaderId;
+    get disabledSelector(): BooleanSelector;
+    get readonlySelector(): BooleanSelector;
+    get hiddenSelector(): BooleanSelector;
+    renderBody(): TemplateResult;
+    private get __paymentMethodSetLoader();
+    private get __localeCodesLoader();
+    private get __languagesLoader();
+}
+export {};

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

@@ -0,0 +1,192 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { ResponsiveMixin } from "../../../mixins/responsive.js";
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-element';
+const NS = 'template-set-form';
+const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
+/**
+ * Form element for creating and editing template sets (`fx:template_set`).
+ *
+ * @slot description:before
+ * @slot description:after
+ *
+ * @slot code:before
+ * @slot code:after
+ *
+ * @slot language:before
+ * @slot language:after
+ *
+ * @slot locale-code:before
+ * @slot locale-code:after
+ *
+ * @slot payment-method-set-uri:before
+ * @slot payment-method-set-uri:after
+ *
+ * @slot language-overrides:before
+ * @slot language-overrides:after
+ *
+ * @slot timestamps:before
+ * @slot timestamps:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @element foxy-template-set-form
+ * @since 1.21.0
+ */
+export class TemplateSetForm extends Base {
+    constructor() {
+        super(...arguments);
+        /** URL of the store's `fx:payment_method_sets` collection (used to fill the relevant dropdown with options). */
+        this.paymentMethodSets = null;
+        /** URL of the `fx:language_strings` property helper (passed through to foxy-i18n-editor). */
+        this.languageStrings = null;
+        /** URL of the `fx:locale_codes` property helper (used to fill the relevant dropdown with options). */
+        this.localeCodes = null;
+        /** URL of the `fx:languages` property helper (used to fill the relevant dropdown with options). */
+        this.languages = null;
+        /** Template render functions mapped to their name. */
+        this.templates = {};
+        this.__paymentMethodSetLoaderId = 'paymentMethodSetLoader';
+        this.__localeCodesLoaderId = 'localeCodesLoader';
+        this.__languagesLoaderId = 'languagesLoader';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            paymentMethodSets: { attribute: 'payment-method-sets' },
+            languageStrings: { attribute: 'language-strings' },
+            localeCodes: { attribute: 'locale-codes' },
+            languages: {},
+        };
+    }
+    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 disabledSelector() {
+        var _a, _b, _c;
+        const alwaysDisabled = [];
+        if (!((_a = this.__languagesLoader) === null || _a === void 0 ? void 0 : _a.data))
+            alwaysDisabled.push('language');
+        if (!((_b = this.__localeCodesLoader) === null || _b === void 0 ? void 0 : _b.data))
+            alwaysDisabled.push('locale-code');
+        if (!((_c = this.__paymentMethodSetLoader) === null || _c === void 0 ? void 0 : _c.data) && this.form.payment_method_set_uri) {
+            alwaysDisabled.push('payment-method-set-uri');
+        }
+        return new BooleanSelector(`${alwaysDisabled.join(' ')} ${super.disabledSelector}`);
+    }
+    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}`);
+    }
+    get hiddenSelector() {
+        var _a;
+        const alwaysHidden = [];
+        if (((_a = this.data) === null || _a === void 0 ? void 0 : _a.code) === 'DEFAULT')
+            alwaysHidden.push('delete');
+        return new BooleanSelector(`${alwaysHidden.join(' ')} ${super.hiddenSelector}`);
+    }
+    renderBody() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const localeCodeEntries = Object.entries((_c = (_b = (_a = this.__localeCodesLoader) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.values) !== null && _c !== void 0 ? _c : {});
+        const localeCodes = localeCodeEntries.map(([value, label]) => ({ value, label }));
+        const languageEntries = Object.entries((_f = (_e = (_d = this.__languagesLoader) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.values) !== null && _f !== void 0 ? _f : {});
+        const languages = languageEntries.map(([value, label]) => ({ value, label }));
+        return html `
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined((_g = this.languages) !== null && _g !== void 0 ? _g : undefined)}
+        id=${this.__languagesLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined((_h = this.localeCodes) !== null && _h !== void 0 ? _h : undefined)}
+        id=${this.__localeCodesLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.form.payment_method_set_uri || undefined)}
+        id=${this.__paymentMethodSetLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <div class="grid grid-cols-1 gap-m sm-grid-cols-2">
+        <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=${languages}>
+        </foxy-internal-select-control>
+
+        <foxy-internal-select-control infer="locale-code" .options=${localeCodes}>
+        </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=${(_j = this.__paymentMethodSetLoader) === null || _j === void 0 ? void 0 : _j.data}
+      >
+      </foxy-internal-async-combo-box-control>
+
+      ${this.data &&
+            this.languageStrings &&
+            !this.hiddenSelector.matches('language-overrides', true)
+            ? html `
+            ${this.renderTemplateOrSlot('language-overrides:before')}
+
+            <foxy-i18n-editor
+              language-overrides=${this.data._links['fx:language_overrides'].href}
+              selected-language=${this.form.language}
+              infer="language-overrides"
+              href=${this.languageStrings}
+            >
+            </foxy-i18n-editor>
+
+            ${this.renderTemplateOrSlot('language-overrides:after')}
+          `
+            : ''}
+
+      <!-- -->
+
+      ${super.renderBody()}
+    `;
+    }
+    get __paymentMethodSetLoader() {
+        return this.renderRoot.querySelector(`#${this.__paymentMethodSetLoaderId}`);
+    }
+    get __localeCodesLoader() {
+        return this.renderRoot.querySelector(`#${this.__localeCodesLoaderId}`);
+    }
+    get __languagesLoader() {
+        return this.renderRoot.querySelector(`#${this.__languagesLoaderId}`);
+    }
+}
+//# 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 { PropertyDeclarations } from 'lit-element';\nimport type { Data, Templates } from './types';\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';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\nconst NS = 'template-set-form';\nconst Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));\n\n/**\n * Form element for creating and editing template sets (`fx:template_set`).\n *\n * @slot description:before\n * @slot description:after\n *\n * @slot code:before\n * @slot code:after\n *\n * @slot language:before\n * @slot language:after\n *\n * @slot locale-code:before\n * @slot locale-code:after\n *\n * @slot payment-method-set-uri:before\n * @slot payment-method-set-uri:after\n *\n * @slot language-overrides:before\n * @slot language-overrides:after\n *\n * @slot timestamps:before\n * @slot timestamps:after\n *\n * @slot create:before\n * @slot create:after\n *\n * @slot delete:before\n * @slot delete:after\n *\n * @element foxy-template-set-form\n * @since 1.21.0\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 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  /** URL of the store's `fx:payment_method_sets` collection (used to fill the relevant dropdown with options). */\n  paymentMethodSets: string | null = null;\n\n  /** URL of the `fx:language_strings` property helper (passed through to foxy-i18n-editor). */\n  languageStrings: string | null = null;\n\n  /** URL of the `fx:locale_codes` property helper (used to fill the relevant dropdown with options). */\n  localeCodes: string | null = null;\n\n  /** URL of the `fx:languages` property helper (used to fill the relevant dropdown with options). */\n  languages: string | null = null;\n\n  /** Template render functions mapped to their name. */\n  templates: Templates = {};\n\n  private readonly __paymentMethodSetLoaderId = 'paymentMethodSetLoader';\n\n  private readonly __localeCodesLoaderId = 'localeCodesLoader';\n\n  private readonly __languagesLoaderId = 'languagesLoader';\n\n  get disabledSelector(): BooleanSelector {\n    const alwaysDisabled: string[] = [];\n\n    if (!this.__languagesLoader?.data) alwaysDisabled.push('language');\n    if (!this.__localeCodesLoader?.data) alwaysDisabled.push('locale-code');\n    if (!this.__paymentMethodSetLoader?.data && this.form.payment_method_set_uri) {\n      alwaysDisabled.push('payment-method-set-uri');\n    }\n\n    return new BooleanSelector(`${alwaysDisabled.join(' ')} ${super.disabledSelector}`);\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}`);\n  }\n\n  get hiddenSelector(): BooleanSelector {\n    const alwaysHidden: string[] = [];\n    if (this.data?.code === 'DEFAULT') alwaysHidden.push('delete');\n    return new BooleanSelector(`${alwaysHidden.join(' ')} ${super.hiddenSelector}`);\n  }\n\n  renderBody(): TemplateResult {\n    const localeCodeEntries = Object.entries(this.__localeCodesLoader?.data?.values ?? {});\n    const localeCodes = localeCodeEntries.map(([value, label]) => ({ value, label }));\n\n    const languageEntries = Object.entries(this.__languagesLoader?.data?.values ?? {});\n    const languages = languageEntries.map(([value, label]) => ({ value, label }));\n\n    return html`\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.languages ?? undefined)}\n        id=${this.__languagesLoaderId}\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=${this.__localeCodesLoaderId}\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 || undefined)}\n        id=${this.__paymentMethodSetLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <div class=\"grid grid-cols-1 gap-m sm-grid-cols-2\">\n        <foxy-internal-text-control infer=\"description\"></foxy-internal-text-control>\n\n        <foxy-internal-text-control infer=\"code\"></foxy-internal-text-control>\n\n        <foxy-internal-select-control infer=\"language\" .options=${languages}>\n        </foxy-internal-select-control>\n\n        <foxy-internal-select-control infer=\"locale-code\" .options=${localeCodes}>\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=${this.__paymentMethodSetLoader?.data}\n      >\n      </foxy-internal-async-combo-box-control>\n\n      ${this.data &&\n      this.languageStrings &&\n      !this.hiddenSelector.matches('language-overrides', true)\n        ? html`\n            ${this.renderTemplateOrSlot('language-overrides:before')}\n\n            <foxy-i18n-editor\n              language-overrides=${this.data._links['fx:language_overrides'].href}\n              selected-language=${this.form.language}\n              infer=\"language-overrides\"\n              href=${this.languageStrings}\n            >\n            </foxy-i18n-editor>\n\n            ${this.renderTemplateOrSlot('language-overrides:after')}\n          `\n        : ''}\n\n      <!-- -->\n\n      ${super.renderBody()}\n    `;\n  }\n\n  private get __paymentMethodSetLoader() {\n    type Loader = NucleonElement<Resource<Rels.PaymentMethodSet>>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__paymentMethodSetLoaderId}`);\n  }\n\n  private get __localeCodesLoader() {\n    type Loader = NucleonElement<Resource<Rels.LocaleCodes>>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__localeCodesLoaderId}`);\n  }\n\n  private get __languagesLoader() {\n    type Loader = NucleonElement<Resource<Rels.Languages>>;\n    return this.renderRoot.querySelector<Loader>(`#${this.__languagesLoaderId}`);\n  }\n}\n"]}

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

@@ -0,0 +1,9 @@
+import '../../internal/InternalAsyncComboBoxControl/index';
+import '../../internal/InternalSelectControl/index';
+import '../../internal/InternalTextControl/index';
+import '../../internal/InternalSandbox/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,11 @@
+import "../../internal/InternalAsyncComboBoxControl/index.js";
+import "../../internal/InternalSelectControl/index.js";
+import "../../internal/InternalTextControl/index.js";
+import "../../internal/InternalSandbox/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,iDAA8C;AAC9C,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/InternalSandbox/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,25 @@
+import type { TemplateSetForm } from './TemplateSetForm';
+import type { Renderer } from '../../../mixins/configurable';
+import type { Resource } from '@foxy.io/sdk/core';
+import type { Rels } from '@foxy.io/sdk/backend';
+export declare type Data = Resource<Rels.TemplateSet>;
+export declare type Templates = {
+    'description:before'?: Renderer<TemplateSetForm>;
+    'description:after'?: Renderer<TemplateSetForm>;
+    'code:before'?: Renderer<TemplateSetForm>;
+    'code:after'?: Renderer<TemplateSetForm>;
+    'language:before'?: Renderer<TemplateSetForm>;
+    'language:after'?: Renderer<TemplateSetForm>;
+    'locale-code:before'?: Renderer<TemplateSetForm>;
+    'locale-code:after'?: Renderer<TemplateSetForm>;
+    'payment-method-set-uri:before'?: Renderer<TemplateSetForm>;
+    'payment-method-set-uri:after'?: Renderer<TemplateSetForm>;
+    'language-overrides:before'?: Renderer<TemplateSetForm>;
+    'language-overrides:after'?: Renderer<TemplateSetForm>;
+    'timestamps:before'?: Renderer<TemplateSetForm>;
+    'timestamps:after'?: Renderer<TemplateSetForm>;
+    'create:before'?: Renderer<TemplateSetForm>;
+    'create:after'?: Renderer<TemplateSetForm>;
+    'delete:before'?: Renderer<TemplateSetForm>;
+    'delete:after'?: Renderer<TemplateSetForm>;
+};

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 { TemplateSetForm } from './TemplateSetForm';\nimport type { Renderer } from '../../../mixins/configurable';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nexport type Data = Resource<Rels.TemplateSet>;\n\nexport type Templates = {\n  'description:before'?: Renderer<TemplateSetForm>;\n  'description:after'?: Renderer<TemplateSetForm>;\n  'code:before'?: Renderer<TemplateSetForm>;\n  'code:after'?: Renderer<TemplateSetForm>;\n  'language:before'?: Renderer<TemplateSetForm>;\n  'language:after'?: Renderer<TemplateSetForm>;\n  'locale-code:before'?: Renderer<TemplateSetForm>;\n  'locale-code:after'?: Renderer<TemplateSetForm>;\n  'payment-method-set-uri:before'?: Renderer<TemplateSetForm>;\n  'payment-method-set-uri:after'?: Renderer<TemplateSetForm>;\n  'language-overrides:before'?: Renderer<TemplateSetForm>;\n  'language-overrides:after'?: Renderer<TemplateSetForm>;\n  'timestamps:before'?: Renderer<TemplateSetForm>;\n  'timestamps:after'?: Renderer<TemplateSetForm>;\n  'create:before'?: Renderer<TemplateSetForm>;\n  'create:after'?: Renderer<TemplateSetForm>;\n  'delete:before'?: Renderer<TemplateSetForm>;\n  'delete:after'?: Renderer<TemplateSetForm>;\n};\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"]}