@foxy.io/elements 1.32.0-beta.7 → 1.33.0-beta.1

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

@@ -1,12 +1,10 @@
-import { PropertyDeclarations, TemplateResult } from 'lit-element';
-import { Data } from './types';
-import { ScopedElementsMap } from '@open-wc/scoped-elements';
-import { NucleonElement } from '../NucleonElement/NucleonElement';
-declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+import type { TemplateResult } from 'lit-element';
+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;
-} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & {
-    styles: import("lit-element").CSSResultArray;
-} & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost>;
+};
 /**
  * Form element for creating or editing templates (`fx:cart_include_template`, `fx:checkout_template`, `fx:cart_template`).
  *
@@ -14,17 +12,11 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
  * @since 1.14.0
  */
 export declare class TemplateForm extends Base<Data> {
-    static get properties(): PropertyDeclarations;
-    static get scopedElements(): ScopedElementsMap;
-    private __cacheState;
-    private __contentChoice;
-    render(): TemplateResult;
+    get readonlySelector(): BooleanSelector;
+    get disabledSelector(): BooleanSelector;
+    get hiddenSelector(): BooleanSelector;
+    renderBody(): TemplateResult;
     protected _sendPost(edits: Partial<Data>): Promise<Data>;
     protected _sendPatch(edits: Partial<Data>): Promise<Data>;
-    private __renderDescription;
-    private __renderContent;
-    private __renderTimestamps;
-    private __renderAction;
-    private __cache;
 }
 export {};

package/dist/elements/public/TemplateForm/TemplateForm.js

@@ -1,14 +1,10 @@
-import { html } from 'lit-element';
-import { Choice, Group, Metadata } from "../../private/index.js";
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
-import { ChoiceChangeEvent } from "../../private/events.js";
-import { ConfigurableMixin } from "../../../mixins/configurable.js";
-import { NucleonElement } from "../NucleonElement/NucleonElement.js";
-import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { classMap } from "../../../utils/class-map.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 } from 'lit-element';
 const NS = 'template-form';
-const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS))));
+const Base = TranslatableMixin(InternalForm, NS);
 /**
  * Form element for creating or editing templates (`fx:cart_include_template`, `fx:checkout_template`, `fx:cart_template`).
  *
@@ -16,321 +12,74 @@ const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(TranslatableMi
  * @since 1.14.0
  */
 export class TemplateForm extends Base {
-    constructor() {
-        super(...arguments);
-        this.__cacheState = 'idle';
-        this.__contentChoice = 'default';
+    get readonlySelector() {
+        const alwaysMatch = [super.readonlySelector.toString()];
+        if (this.form.content_url)
+            alwaysMatch.unshift('content');
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
     }
-    static get properties() {
-        return {
-            ...super.properties,
-            __cacheState: { attribute: false },
-            __contentChoice: { attribute: false },
-        };
+    get disabledSelector() {
+        const alwaysMatch = [super.disabledSelector.toString()];
+        if (!this.in({ idle: { snapshot: 'clean' } }) || !this.data.content_url) {
+            alwaysMatch.unshift('source:cache');
+        }
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
     }
-    static get scopedElements() {
-        return {
-            'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),
-            'foxy-internal-source-control': customElements.get('foxy-internal-source-control'),
-            'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
-            'foxy-spinner': customElements.get('foxy-spinner'),
-            'foxy-i18n': customElements.get('foxy-i18n'),
-            'vaadin-text-field': customElements.get('vaadin-text-field'),
-            'vaadin-button': customElements.get('vaadin-button'),
-            'x-metadata': Metadata,
-            'x-choice': Choice,
-            'x-group': Group,
-        };
+    get hiddenSelector() {
+        var _a;
+        const alwaysMatch = [super.hiddenSelector.toString()];
+        if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.content_url))
+            alwaysMatch.unshift('source:cache');
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
     }
-    render() {
-        var _a, _b;
-        const { hiddenSelector, href, lang, ns } = this;
-        const action = href ? 'delete' : 'create';
-        const isBusy = this.in('busy');
-        const isFail = this.in('fail');
+    renderBody() {
+        var _a;
         return html `
-      <div class="space-y-m relative">
-        ${hiddenSelector.matches('description', true) ? '' : this.__renderDescription()}
-        ${hiddenSelector.matches('content', true) ? '' : this.__renderContent()}
-        ${hiddenSelector.matches('timestamps', true) || !href ? '' : this.__renderTimestamps()}
-        ${hiddenSelector.matches(action) ? '' : this.__renderAction(action)}
+      ${this.renderHeader()}
+
+      <foxy-internal-summary-control infer="general">
+        <foxy-internal-text-control layout="summary-item" infer="description">
+        </foxy-internal-text-control>
+      </foxy-internal-summary-control>
+
+      ${this.renderTemplateOrSlot()}
+
+      <foxy-internal-source-control infer="content"></foxy-internal-source-control>
 
-        <div
-          data-testid="spinner"
-          class=${classMap({
-            'transition duration-500 ease-in-out absolute inset-0 flex': true,
-            'opacity-0 pointer-events-none': !isBusy && !isFail,
-        })}
+      <foxy-internal-summary-control infer="source">
+        <foxy-internal-text-control layout="summary-item" infer="content-url">
+        </foxy-internal-text-control>
+
+        <foxy-internal-template-form-async-action
+          theme="tertiary-inline"
+          infer="cache"
+          href=${ifDefined((_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:cache'].href)}
         >
-          <foxy-spinner
-            layout="vertical"
-            class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l"
-            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}
-            lang=${lang}
-            ns="${ns} ${(_b = (_a = customElements.get('foxy-spinner')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
-          >
-          </foxy-spinner>
-        </div>
-      </div>
+        </foxy-internal-template-form-async-action>
+      </foxy-internal-summary-control>
+
+      ${super.renderBody()}
     `;
     }
     async _sendPost(edits) {
         const data = await super._sendPost(edits);
-        if (!data.content_url)
-            return data;
-        this.__cacheState = 'busy';
-        const url = data._links['fx:cache'].href;
-        const response = await new TemplateForm.API(this).fetch(url, { method: 'POST' });
-        this.__cacheState = response.ok ? 'idle' : 'fail';
+        if (edits.content_url) {
+            const url = data._links['fx:cache'].href;
+            const response = await new TemplateForm.API(this).fetch(url, { method: 'POST' });
+            if (!response.ok)
+                throw ['error:failed_to_cache'];
+        }
         return await this._fetch(data._links.self.href);
     }
     async _sendPatch(edits) {
         const data = await super._sendPatch(edits);
         if (!edits.content_url)
             return data;
-        this.__cacheState = 'busy';
         const url = data._links['fx:cache'].href;
         const response = await new TemplateForm.API(this).fetch(url, { method: 'POST' });
-        this.__cacheState = response.ok ? 'idle' : 'fail';
+        if (!response.ok)
+            throw ['error:failed_to_cache'];
         return await this._fetch(data._links.self.href);
     }
-    __renderDescription() {
-        var _a, _b;
-        const scope = 'description';
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot(`${scope}:before`)}
-
-        <vaadin-text-field
-          data-testid=${scope}
-          class="w-full mb-s"
-          label=${this.t(scope)}
-          ?disabled=${!this.in('idle') || this.disabledSelector.matches(scope)}
-          ?readonly=${this.readonlySelector.matches(scope)}
-          .value=${(_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : ''}
-          @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
-          @input=${(evt) => {
-            this.edit({ description: evt.currentTarget.value });
-        }}
-        >
-        </vaadin-text-field>
-
-        ${this.renderTemplateOrSlot(`${scope}:after`)}
-      </div>
-    `;
-    }
-    __renderContent() {
-        var _a, _b;
-        const scope = 'content';
-        const url = this.form.content_url;
-        const source = this.form.content;
-        const contentChoice = url ? 'url' : source ? 'clipboard' : this.__contentChoice;
-        const isDisabled = !this.in('idle') || this.disabledSelector.matches(scope);
-        const isReadonly = this.readonlySelector.matches(scope);
-        const isSyncProhibited = isReadonly || !((_a = this.data) === null || _a === void 0 ? void 0 : _a.content_url) || url !== this.data.content_url;
-        return html `
-      <div data-testid="content">
-        <x-group frame>
-          <foxy-i18n
-            class=${classMap({ 'transition-colors': true, 'text-disabled': isDisabled })}
-            lang=${this.lang}
-            slot="header"
-            key="template"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
-
-          <x-choice
-            data-testid="content-type"
-            .value=${contentChoice}
-            .items=${['default', 'url', 'clipboard']}
-            ?readonly=${isReadonly}
-            ?disabled=${isDisabled}
-            @change=${(evt) => {
-            if (evt instanceof ChoiceChangeEvent) {
-                this.edit({ content: '', content_url: '' });
-                this.__contentChoice = evt.detail;
-            }
-        }}
-          >
-            ${['default', 'url', 'clipboard'].map(value => {
-            return html `
-                <div slot="${value}-label" class="py-s leading-s">
-                  <foxy-i18n class="block" lang=${this.lang} key="template_${value}" ns=${this.ns}>
-                  </foxy-i18n>
-                </div>
-              `;
-        })}
-
-            <div
-              style="--lumo-border-radius: var(--lumo-border-radius-s)"
-              class="mb-m"
-              slot="url"
-              ?hidden=${contentChoice !== 'url'}
-            >
-              <div class="flex items-end mt-0">
-                <vaadin-text-field
-                  data-testid="content-url"
-                  placeholder="https://example.com/my-template"
-                  label=${this.t('url')}
-                  class="flex-1 min-w-0"
-                  ?readonly=${isReadonly}
-                  ?disabled=${isDisabled}
-                  .value=${this.form.content_url}
-                  @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
-                  @input=${(evt) => {
-            const value = evt.currentTarget.value;
-            this.edit({ content: '', content_url: value });
-        }}
-                >
-                </vaadin-text-field>
-
-                <vaadin-button
-                  data-testid="cache"
-                  class="relative flex-shrink-0 ml-s"
-                  ?hidden=${isSyncProhibited}
-                  ?disabled=${isDisabled || this.__cacheState === 'busy'}
-                  @click=${this.__cache}
-                >
-                  <foxy-i18n
-                    class=${classMap({
-            'relative transition-opacity': true,
-            'opacity-0': this.__cacheState !== 'idle',
-        })}
-                    lang=${this.lang}
-                    key="cache"
-                    ns=${this.ns}
-                  >
-                  </foxy-i18n>
-
-                  <div
-                    class=${classMap({
-            'absolute inset-0 flex transition-opacity': true,
-            'opacity-0': this.__cacheState === 'idle',
-        })}
-                  >
-                    <foxy-spinner
-                      layout="no-label"
-                      class="m-auto"
-                      state=${this.__cacheState === 'fail' ? 'error' : 'busy'}
-                      lang=${this.lang}
-                      ns=${this.ns}
-                    >
-                    </foxy-spinner>
-                  </div>
-                </vaadin-button>
-              </div>
-
-              <foxy-internal-source-control
-                placeholder=${this.t('url_source_placeholder')}
-                helper-text=""
-                label=${this.t('url_source_label')}
-                infer="content"
-                class="mt-m${((_b = this.data) === null || _b === void 0 ? void 0 : _b.content) ? '' : ' hidden'}"
-              >
-              </foxy-internal-source-control>
-            </div>
-
-            <foxy-internal-source-control
-              placeholder=${this.t('clipboard_source_placeholder')}
-              helper-text=""
-              label=${this.t('clipboard_source_label')}
-              infer="content"
-              class="mb-m${contentChoice === 'clipboard' ? '' : ' hidden'}"
-              style="--lumo-border-radius: var(--lumo-border-radius-s)"
-              slot="clipboard"
-            >
-            </foxy-internal-source-control>
-          </x-choice>
-        </x-group>
-      </div>
-    `;
-    }
-    __renderTimestamps() {
-        const scope = 'timestamps';
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot(`${scope}:before`)}
-
-        <x-metadata
-          data-testid="timestamps"
-          .items=${['date_modified', 'date_created'].map(field => {
-            var _a;
-            return ({
-                name: this.t(field),
-                value: ((_a = this.data) === null || _a === void 0 ? void 0 : _a[field]) ? this.t('date', { value: new Date(this.data[field]) })
-                    : '',
-            });
-        })}
-        >
-        </x-metadata>
-
-        ${this.renderTemplateOrSlot(`${scope}:after`)}
-      </div>
-    `;
-    }
-    __renderAction(action) {
-        const { disabledSelector, href, lang, ns } = this;
-        const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });
-        const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });
-        const isDisabled = !this.in('idle') || disabledSelector.matches(action, true);
-        const isValid = isTemplateValid || isSnapshotValid;
-        const handleClick = (evt) => {
-            if (action === 'delete') {
-                const confirm = this.renderRoot.querySelector('#confirm');
-                confirm.show(evt.currentTarget);
-            }
-            else {
-                this.submit();
-            }
-        };
-        return html `
-      <div>
-        ${this.renderTemplateOrSlot(`${action}:before`)}
-
-        <foxy-internal-confirm-dialog
-          message="delete_prompt"
-          confirm="delete"
-          cancel="cancel"
-          header="delete"
-          theme="primary error"
-          lang=${lang}
-          ns=${ns}
-          id="confirm"
-          data-testid="confirm"
-          @hide=${(evt) => {
-            if (!evt.detail.cancelled)
-                this.delete();
-        }}
-        >
-        </foxy-internal-confirm-dialog>
-
-        <vaadin-button
-          class="w-full"
-          theme=${this.in('idle') ? (href ? 'error' : 'primary success') : ''}
-          data-testid=${action}
-          ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled}
-          @click=${handleClick}
-        >
-          <foxy-i18n ns=${ns} key=${action} lang=${lang}></foxy-i18n>
-        </vaadin-button>
-
-        ${this.renderTemplateOrSlot(`${action}:after`)}
-      </div>
-    `;
-    }
-    async __cache() {
-        var _a, _b;
-        this.__cacheState = 'busy';
-        try {
-            const url = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:cache'].href) !== null && _b !== void 0 ? _b : '';
-            const response = await new TemplateForm.API(this).fetch(url, { method: 'POST' });
-            this.__cacheState = response.ok ? 'idle' : 'fail';
-            this.refresh();
-        }
-        catch (_c) {
-            this.__cacheState = 'fail';
-        }
-    }
 }
 //# sourceMappingURL=TemplateForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TemplateForm.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateForm/TemplateForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyDeclarations, TemplateResult, html } from 'lit-element';\nimport { Choice, Group, Metadata } from '../../private/index';\nimport { Data } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\n\nimport { ChoiceChangeEvent } from '../../private/events';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { TextFieldElement } from '@vaadin/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst NS = 'template-form';\nconst Base = ScopedElementsMixin(\n  ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Form element for creating or editing templates (`fx:cart_include_template`, `fx:checkout_template`, `fx:cart_template`).\n *\n * @element foxy-template-form\n * @since 1.14.0\n */\nexport class TemplateForm extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __cacheState: { attribute: false },\n      __contentChoice: { attribute: false },\n    };\n  }\n\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n      'foxy-internal-source-control': customElements.get('foxy-internal-source-control'),\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'x-metadata': Metadata,\n      'x-choice': Choice,\n      'x-group': Group,\n    };\n  }\n\n  private __cacheState: 'idle' | 'busy' | 'fail' = 'idle';\n\n  private __contentChoice: 'default' | 'url' | 'clipboard' = 'default';\n\n  render(): TemplateResult {\n    const { hiddenSelector, href, lang, ns } = this;\n    const action = href ? 'delete' : 'create';\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n\n    return html`\n      <div class=\"space-y-m relative\">\n        ${hiddenSelector.matches('description', true) ? '' : this.__renderDescription()}\n        ${hiddenSelector.matches('content', true) ? '' : this.__renderContent()}\n        ${hiddenSelector.matches('timestamps', true) || !href ? '' : this.__renderTimestamps()}\n        ${hiddenSelector.matches(action) ? '' : this.__renderAction(action)}\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition duration-500 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}\n            lang=${lang}\n            ns=\"${ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  protected async _sendPost(edits: Partial<Data>): Promise<Data> {\n    const data = await super._sendPost(edits);\n    if (!data.content_url) return data;\n\n    this.__cacheState = 'busy';\n    const url = data._links['fx:cache'].href;\n    const response = await new TemplateForm.API(this).fetch(url, { method: 'POST' });\n    this.__cacheState = response.ok ? 'idle' : 'fail';\n\n    return await this._fetch(data._links.self.href);\n  }\n\n  protected async _sendPatch(edits: Partial<Data>): Promise<Data> {\n    const data = await super._sendPatch(edits);\n    if (!edits.content_url) return data;\n\n    this.__cacheState = 'busy';\n    const url = data._links['fx:cache'].href;\n    const response = await new TemplateForm.API(this).fetch(url, { method: 'POST' });\n    this.__cacheState = response.ok ? 'idle' : 'fail';\n\n    return await this._fetch(data._links.self.href);\n  }\n\n  private __renderDescription() {\n    const scope = 'description';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${scope}:before`)}\n\n        <vaadin-text-field\n          data-testid=${scope}\n          class=\"w-full mb-s\"\n          label=${this.t(scope)}\n          ?disabled=${!this.in('idle') || this.disabledSelector.matches(scope)}\n          ?readonly=${this.readonlySelector.matches(scope)}\n          .value=${this.form?.description ?? ''}\n          @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n          @input=${(evt: CustomEvent) => {\n            this.edit({ description: (evt.currentTarget as TextFieldElement).value });\n          }}\n        >\n        </vaadin-text-field>\n\n        ${this.renderTemplateOrSlot(`${scope}:after`)}\n      </div>\n    `;\n  }\n\n  private __renderContent() {\n    const scope = 'content';\n    const url = this.form.content_url;\n    const source = this.form.content;\n    const contentChoice = url ? 'url' : source ? 'clipboard' : this.__contentChoice;\n\n    const isDisabled = !this.in('idle') || this.disabledSelector.matches(scope);\n    const isReadonly = this.readonlySelector.matches(scope);\n    const isSyncProhibited = isReadonly || !this.data?.content_url || url !== this.data.content_url;\n\n    return html`\n      <div data-testid=\"content\">\n        <x-group frame>\n          <foxy-i18n\n            class=${classMap({ 'transition-colors': true, 'text-disabled': isDisabled })}\n            lang=${this.lang}\n            slot=\"header\"\n            key=\"template\"\n            ns=${this.ns}\n          >\n          </foxy-i18n>\n\n          <x-choice\n            data-testid=\"content-type\"\n            .value=${contentChoice}\n            .items=${['default', 'url', 'clipboard']}\n            ?readonly=${isReadonly}\n            ?disabled=${isDisabled}\n            @change=${(evt: Event) => {\n              if (evt instanceof ChoiceChangeEvent) {\n                this.edit({ content: '', content_url: '' });\n                this.__contentChoice = evt.detail as 'url' | 'clipboard' | 'default';\n              }\n            }}\n          >\n            ${['default', 'url', 'clipboard'].map(value => {\n              return html`\n                <div slot=\"${value}-label\" class=\"py-s leading-s\">\n                  <foxy-i18n class=\"block\" lang=${this.lang} key=\"template_${value}\" ns=${this.ns}>\n                  </foxy-i18n>\n                </div>\n              `;\n            })}\n\n            <div\n              style=\"--lumo-border-radius: var(--lumo-border-radius-s)\"\n              class=\"mb-m\"\n              slot=\"url\"\n              ?hidden=${contentChoice !== 'url'}\n            >\n              <div class=\"flex items-end mt-0\">\n                <vaadin-text-field\n                  data-testid=\"content-url\"\n                  placeholder=\"https://example.com/my-template\"\n                  label=${this.t('url')}\n                  class=\"flex-1 min-w-0\"\n                  ?readonly=${isReadonly}\n                  ?disabled=${isDisabled}\n                  .value=${this.form.content_url}\n                  @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n                  @input=${(evt: CustomEvent) => {\n                    const value = (evt.currentTarget as TextFieldElement).value;\n                    this.edit({ content: '', content_url: value });\n                  }}\n                >\n                </vaadin-text-field>\n\n                <vaadin-button\n                  data-testid=\"cache\"\n                  class=\"relative flex-shrink-0 ml-s\"\n                  ?hidden=${isSyncProhibited}\n                  ?disabled=${isDisabled || this.__cacheState === 'busy'}\n                  @click=${this.__cache}\n                >\n                  <foxy-i18n\n                    class=${classMap({\n                      'relative transition-opacity': true,\n                      'opacity-0': this.__cacheState !== 'idle',\n                    })}\n                    lang=${this.lang}\n                    key=\"cache\"\n                    ns=${this.ns}\n                  >\n                  </foxy-i18n>\n\n                  <div\n                    class=${classMap({\n                      'absolute inset-0 flex transition-opacity': true,\n                      'opacity-0': this.__cacheState === 'idle',\n                    })}\n                  >\n                    <foxy-spinner\n                      layout=\"no-label\"\n                      class=\"m-auto\"\n                      state=${this.__cacheState === 'fail' ? 'error' : 'busy'}\n                      lang=${this.lang}\n                      ns=${this.ns}\n                    >\n                    </foxy-spinner>\n                  </div>\n                </vaadin-button>\n              </div>\n\n              <foxy-internal-source-control\n                placeholder=${this.t('url_source_placeholder')}\n                helper-text=\"\"\n                label=${this.t('url_source_label')}\n                infer=\"content\"\n                class=\"mt-m${this.data?.content ? '' : ' hidden'}\"\n              >\n              </foxy-internal-source-control>\n            </div>\n\n            <foxy-internal-source-control\n              placeholder=${this.t('clipboard_source_placeholder')}\n              helper-text=\"\"\n              label=${this.t('clipboard_source_label')}\n              infer=\"content\"\n              class=\"mb-m${contentChoice === 'clipboard' ? '' : ' hidden'}\"\n              style=\"--lumo-border-radius: var(--lumo-border-radius-s)\"\n              slot=\"clipboard\"\n            >\n            </foxy-internal-source-control>\n          </x-choice>\n        </x-group>\n      </div>\n    `;\n  }\n\n  private __renderTimestamps() {\n    const scope = 'timestamps';\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${scope}:before`)}\n\n        <x-metadata\n          data-testid=\"timestamps\"\n          .items=${(['date_modified', 'date_created'] as const).map(field => ({\n            name: this.t(field),\n            value: this.data?.[field]\n              ? this.t('date', { value: new Date(this.data[field] as string) })\n              : '',\n          }))}\n        >\n        </x-metadata>\n\n        ${this.renderTemplateOrSlot(`${scope}:after`)}\n      </div>\n    `;\n  }\n\n  private __renderAction(action: string) {\n    const { disabledSelector, href, lang, ns } = this;\n\n    const isTemplateValid = this.in({ idle: { template: { dirty: 'valid' } } });\n    const isSnapshotValid = this.in({ idle: { snapshot: { dirty: 'valid' } } });\n    const isDisabled = !this.in('idle') || disabledSelector.matches(action, true);\n    const isValid = isTemplateValid || isSnapshotValid;\n\n    const handleClick = (evt: Event) => {\n      if (action === 'delete') {\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    return html`\n      <div>\n        ${this.renderTemplateOrSlot(`${action}:before`)}\n\n        <foxy-internal-confirm-dialog\n          message=\"delete_prompt\"\n          confirm=\"delete\"\n          cancel=\"cancel\"\n          header=\"delete\"\n          theme=\"primary error\"\n          lang=${lang}\n          ns=${ns}\n          id=\"confirm\"\n          data-testid=\"confirm\"\n          @hide=${(evt: DialogHideEvent) => {\n            if (!evt.detail.cancelled) this.delete();\n          }}\n        >\n        </foxy-internal-confirm-dialog>\n\n        <vaadin-button\n          class=\"w-full\"\n          theme=${this.in('idle') ? (href ? 'error' : 'primary success') : ''}\n          data-testid=${action}\n          ?disabled=${(this.in({ idle: 'template' }) && !isValid) || isDisabled}\n          @click=${handleClick}\n        >\n          <foxy-i18n ns=${ns} key=${action} lang=${lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot(`${action}:after`)}\n      </div>\n    `;\n  }\n\n  private async __cache(): Promise<void> {\n    this.__cacheState = 'busy';\n\n    try {\n      const url = this.data?._links['fx:cache'].href ?? '';\n      const response = await new TemplateForm.API(this).fetch(url, { method: 'POST' });\n      this.__cacheState = response.ok ? 'idle' : 'fail';\n      this.refresh();\n    } catch {\n      this.__cacheState = 'fail';\n    }\n  }\n}\n"]}
+{"version":3,"file":"TemplateForm.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateForm/TemplateForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TemplateResult } from 'lit-element';\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 } from 'lit-element';\n\nconst NS = 'template-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\n/**\n * Form element for creating or editing templates (`fx:cart_include_template`, `fx:checkout_template`, `fx:cart_template`).\n *\n * @element foxy-template-form\n * @since 1.14.0\n */\nexport class TemplateForm extends Base<Data> {\n  get readonlySelector(): BooleanSelector {\n    const alwaysMatch = [super.readonlySelector.toString()];\n    if (this.form.content_url) alwaysMatch.unshift('content');\n    return new BooleanSelector(alwaysMatch.join(' ').trim());\n  }\n\n  get disabledSelector(): BooleanSelector {\n    const alwaysMatch = [super.disabledSelector.toString()];\n\n    if (!this.in({ idle: { snapshot: 'clean' } }) || !this.data.content_url) {\n      alwaysMatch.unshift('source:cache');\n    }\n\n    return new BooleanSelector(alwaysMatch.join(' ').trim());\n  }\n\n  get hiddenSelector(): BooleanSelector {\n    const alwaysMatch = [super.hiddenSelector.toString()];\n    if (!this.data?.content_url) alwaysMatch.unshift('source:cache');\n    return new BooleanSelector(alwaysMatch.join(' ').trim());\n  }\n\n  renderBody(): TemplateResult {\n    return html`\n      ${this.renderHeader()}\n\n      <foxy-internal-summary-control infer=\"general\">\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"description\">\n        </foxy-internal-text-control>\n      </foxy-internal-summary-control>\n\n      ${this.renderTemplateOrSlot()}\n\n      <foxy-internal-source-control infer=\"content\"></foxy-internal-source-control>\n\n      <foxy-internal-summary-control infer=\"source\">\n        <foxy-internal-text-control layout=\"summary-item\" infer=\"content-url\">\n        </foxy-internal-text-control>\n\n        <foxy-internal-template-form-async-action\n          theme=\"tertiary-inline\"\n          infer=\"cache\"\n          href=${ifDefined(this.data?._links['fx:cache'].href)}\n        >\n        </foxy-internal-template-form-async-action>\n      </foxy-internal-summary-control>\n\n      ${super.renderBody()}\n    `;\n  }\n\n  protected async _sendPost(edits: Partial<Data>): Promise<Data> {\n    const data = await super._sendPost(edits);\n\n    if (edits.content_url) {\n      const url = data._links['fx:cache'].href;\n      const response = await new TemplateForm.API(this).fetch(url, { method: 'POST' });\n      if (!response.ok) throw ['error:failed_to_cache'];\n    }\n\n    return await this._fetch(data._links.self.href);\n  }\n\n  protected async _sendPatch(edits: Partial<Data>): Promise<Data> {\n    const data = await super._sendPatch(edits);\n    if (!edits.content_url) return data;\n\n    const url = data._links['fx:cache'].href;\n    const response = await new TemplateForm.API(this).fetch(url, { method: 'POST' });\n    if (!response.ok) throw ['error:failed_to_cache'];\n\n    return await this._fetch(data._links.self.href);\n  }\n}\n"]}

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

@@ -1,9 +1,7 @@
-import '@vaadin/vaadin-text-field/vaadin-text-field';
-import '@vaadin/vaadin-button';
-import '../../internal/InternalConfirmDialog/index';
+import '../../internal/InternalSummaryControl/index';
 import '../../internal/InternalSourceControl/index';
-import '../../internal/InternalSandbox/index';
-import '../Spinner/index';
-import '../I18n/index';
+import '../../internal/InternalTextControl/index';
+import '../../internal/InternalForm/index';
+import './internal/InternalTemplateFormAsyncAction/index';
 import { TemplateForm } from './TemplateForm';
 export { TemplateForm };

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

@@ -1,10 +1,8 @@
-import '@vaadin/vaadin-text-field/vaadin-text-field';
-import '@vaadin/vaadin-button';
-import "../../internal/InternalConfirmDialog/index.js";
+import "../../internal/InternalSummaryControl/index.js";
 import "../../internal/InternalSourceControl/index.js";
-import "../../internal/InternalSandbox/index.js";
-import "../Spinner/index.js";
-import "../I18n/index.js";
+import "../../internal/InternalTextControl/index.js";
+import "../../internal/InternalForm/index.js";
+import "./internal/InternalTemplateFormAsyncAction/index.js";
 import { TemplateForm } from "./TemplateForm.js";
 customElements.define('foxy-template-form', TemplateForm);
 export { TemplateForm };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,6CAA6C,CAAC;AACrD,OAAO,uBAAuB,CAAC;AAC/B,uDAAoD;AACpD,uDAAoD;AACpD,iDAA8C;AAC9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,YAAY,EAAE,0BAAuB;AAE9C,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-text-field/vaadin-text-field';\nimport '@vaadin/vaadin-button';\nimport '../../internal/InternalConfirmDialog/index';\nimport '../../internal/InternalSourceControl/index';\nimport '../../internal/InternalSandbox/index';\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { TemplateForm } from './TemplateForm';\n\ncustomElements.define('foxy-template-form', TemplateForm);\n\nexport { TemplateForm };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateForm/index.ts"],"names":[],"mappings":"AAAA,wDAAqD;AACrD,uDAAoD;AACpD,qDAAkD;AAClD,8CAA2C;AAE3C,6DAA0D;AAE1D,OAAO,EAAE,YAAY,EAAE,0BAAuB;AAE9C,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSummaryControl/index';\nimport '../../internal/InternalSourceControl/index';\nimport '../../internal/InternalTextControl/index';\nimport '../../internal/InternalForm/index';\n\nimport './internal/InternalTemplateFormAsyncAction/index';\n\nimport { TemplateForm } from './TemplateForm';\n\ncustomElements.define('foxy-template-form', TemplateForm);\n\nexport { TemplateForm };\n"]}

package/dist/elements/public/TemplateForm/internal/InternalTemplateFormAsyncAction/InternalTemplateFormAsyncAction.d.ts

@@ -0,0 +1,10 @@
+import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import { InternalControl } from '../../../../internal/InternalControl/InternalControl';
+export declare class InternalTemplateFormAsyncAction extends InternalControl {
+    static get properties(): PropertyDeclarations;
+    theme: string | null;
+    href: string | null;
+    private __state;
+    renderControl(): TemplateResult;
+    private __submit;
+}

package/dist/elements/public/TemplateForm/internal/InternalTemplateFormAsyncAction/InternalTemplateFormAsyncAction.js

@@ -0,0 +1,49 @@
+import { InternalControl } from "../../../../internal/InternalControl/InternalControl.js";
+import { NucleonElement } from "../../../NucleonElement/NucleonElement.js";
+import { html } from 'lit-element';
+export class InternalTemplateFormAsyncAction extends InternalControl {
+    constructor() {
+        super(...arguments);
+        this.theme = null;
+        this.href = null;
+        this.__state = 'idle';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            __state: { type: String },
+            theme: { type: String },
+            href: { type: String },
+        };
+    }
+    renderControl() {
+        const state = this.__state;
+        const theme = state === 'fail' ? 'error' : state === 'idle' ? '' : '';
+        return html `
+      <vaadin-button
+        theme=${`${this.theme} ${theme !== null && theme !== void 0 ? theme : ''}`.trim()}
+        ?disabled=${state === 'busy' || this.disabled}
+        @click=${this.__submit}
+      >
+        <foxy-i18n key=${state} infer=""></foxy-i18n>
+      </vaadin-button>
+    `;
+    }
+    async __submit() {
+        var _a, _b;
+        if (this.__state === 'busy')
+            return;
+        try {
+            this.__state = 'busy';
+            const api = new NucleonElement.API(this);
+            const response = await api.fetch((_a = this.href) !== null && _a !== void 0 ? _a : '', { method: 'POST' });
+            this.__state = response.ok ? 'idle' : 'fail';
+            if (response.ok)
+                (_b = this.nucleon) === null || _b === void 0 ? void 0 : _b.refresh();
+        }
+        catch (_c) {
+            this.__state = 'fail';
+        }
+    }
+}
+//# sourceMappingURL=InternalTemplateFormAsyncAction.js.map

package/dist/elements/public/TemplateForm/internal/InternalTemplateFormAsyncAction/InternalTemplateFormAsyncAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalTemplateFormAsyncAction.js","sourceRoot":"","sources":["../../../../../../src/elements/public/TemplateForm/internal/InternalTemplateFormAsyncAction/InternalTemplateFormAsyncAction.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,gEAA6D;AACvF,OAAO,EAAE,cAAc,EAAE,kDAA+C;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,MAAM,OAAO,+BAAgC,SAAQ,eAAe;IAApE;;QAUE,UAAK,GAAkB,IAAI,CAAC;QAE5B,SAAI,GAAkB,IAAI,CAAC;QAEnB,YAAO,GAAG,MAAM,CAAC;IAgC3B,CAAC;IA7CC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACvB,CAAC;IACJ,CAAC;IAQD,aAAa;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QAC3B,MAAM,KAAK,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAEtE,OAAO,IAAI,CAAA;;gBAEC,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAAE,CAAC,IAAI,EAAE;oBACjC,KAAK,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ;iBACpC,IAAI,CAAC,QAAQ;;yBAEL,KAAK;;KAEzB,CAAC;IACJ,CAAC;IAEO,KAAK,CAAC,QAAQ;;QACpB,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;YAAE,OAAO;QAEpC,IAAI;YACF,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;YAEtB,MAAM,GAAG,GAAG,IAAI,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACzC,MAAM,QAAQ,GAAG,MAAM,GAAG,CAAC,KAAK,OAAC,IAAI,CAAC,IAAI,mCAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;YAEtE,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;YAC7C,IAAI,QAAQ,CAAC,EAAE;gBAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,GAAG;SAC1C;QAAC,WAAM;YACN,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;SACvB;IACH,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { InternalControl } from '../../../../internal/InternalControl/InternalControl';\nimport { NucleonElement } from '../../../NucleonElement/NucleonElement';\nimport { html } from 'lit-element';\n\nexport class InternalTemplateFormAsyncAction extends InternalControl {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __state: { type: String },\n      theme: { type: String },\n      href: { type: String },\n    };\n  }\n\n  theme: string | null = null;\n\n  href: string | null = null;\n\n  private __state = 'idle';\n\n  renderControl(): TemplateResult {\n    const state = this.__state;\n    const theme = state === 'fail' ? 'error' : state === 'idle' ? '' : '';\n\n    return html`\n      <vaadin-button\n        theme=${`${this.theme} ${theme ?? ''}`.trim()}\n        ?disabled=${state === 'busy' || this.disabled}\n        @click=${this.__submit}\n      >\n        <foxy-i18n key=${state} infer=\"\"></foxy-i18n>\n      </vaadin-button>\n    `;\n  }\n\n  private async __submit(): Promise<void> {\n    if (this.__state === 'busy') return;\n\n    try {\n      this.__state = 'busy';\n\n      const api = new NucleonElement.API(this);\n      const response = await api.fetch(this.href ?? '', { method: 'POST' });\n\n      this.__state = response.ok ? 'idle' : 'fail';\n      if (response.ok) this.nucleon?.refresh();\n    } catch {\n      this.__state = 'fail';\n    }\n  }\n}\n"]}

package/dist/elements/public/TemplateForm/internal/InternalTemplateFormAsyncAction/index.d.ts

@@ -0,0 +1,5 @@
+import '@vaadin/vaadin-button';
+import '../../../../internal/InternalControl/index';
+import '../../../I18n/index';
+import { InternalTemplateFormAsyncAction as Control } from './InternalTemplateFormAsyncAction';
+export { Control as InternalTemplateFormAsyncAction };

package/dist/elements/public/TemplateForm/internal/InternalTemplateFormAsyncAction/index.js

@@ -0,0 +1,7 @@
+import '@vaadin/vaadin-button';
+import "../../../../internal/InternalControl/index.js";
+import "../../../I18n/index.js";
+import { InternalTemplateFormAsyncAction as Control } from "./InternalTemplateFormAsyncAction.js";
+customElements.define('foxy-internal-template-form-async-action', Control);
+export { Control as InternalTemplateFormAsyncAction };
+//# sourceMappingURL=index.js.map

package/dist/elements/public/TemplateForm/internal/InternalTemplateFormAsyncAction/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/public/TemplateForm/internal/InternalTemplateFormAsyncAction/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,uDAAoD;AACpD,gCAA6B;AAE7B,OAAO,EAAE,+BAA+B,IAAI,OAAO,EAAE,6CAA0C;AAE/F,cAAc,CAAC,MAAM,CAAC,0CAA0C,EAAE,OAAO,CAAC,CAAC;AAE3E,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\nimport '../../../../internal/InternalControl/index';\nimport '../../../I18n/index';\n\nimport { InternalTemplateFormAsyncAction as Control } from './InternalTemplateFormAsyncAction';\n\ncustomElements.define('foxy-internal-template-form-async-action', Control);\n\nexport { Control as InternalTemplateFormAsyncAction };\n"]}