@foxy.io/elements 1.14.0-beta.7 → 1.14.1

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

@@ -7,12 +7,34 @@ 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 { ifDefined } from 'lit-html/directives/if-defined';
+import { live } from 'lit-html/directives/live';
 const NS = 'template-form';
 const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS))));
+/**
+ * Form element for creating or editing templates (`fx:cart_include_template`, `fx:checkout_template`, `fx:cart_template`).
+ *
+ * @slot description:before
+ * @slot description:after
+ *
+ * @slot content:before
+ * @slot content:after
+ *
+ * @slot timestamps:before
+ * @slot timestamps:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @element foxy-template-form
+ * @since 1.14.0
+ */
 export class TemplateForm extends Base {
     constructor() {
         super(...arguments);
+        this.templates = {};
         this.__cacheState = 'idle';
         this.__contentChoice = 'default';
     }
@@ -80,13 +102,17 @@ export class TemplateForm extends Base {
     }
     __renderDescription() {
         var _a, _b;
+        const scope = 'description';
         return html `
       <div>
-        ${this.renderTemplateOrSlot('description:before')}
+        ${this.renderTemplateOrSlot(`${scope}:before`)}
 
         <vaadin-text-field
+          data-testid=${scope}
           class="w-full mb-s"
-          label=${this.t('description')}
+          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) => {
@@ -95,30 +121,40 @@ export class TemplateForm extends Base {
         >
         </vaadin-text-field>
 
-        ${this.renderTemplateOrSlot('description:after')}
+        ${this.renderTemplateOrSlot(`${scope}:after`)}
       </div>
     `;
     }
     __renderContent() {
         var _a;
+        const scope = 'content';
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches(scope);
+        const isReadonly = this.readonlySelector.matches(scope);
         const contentChoice = this.form.content_url
             ? 'url'
             : this.form.content
                 ? 'clipboard'
                 : this.__contentChoice;
         return html `
-      <div>
-        ${this.renderTemplateOrSlot('content:before')}
+      <div data-testid="content">
+        ${this.renderTemplateOrSlot(`${scope}:before`)}
 
         <x-group frame>
-          <foxy-i18n lang=${this.lang} slot="header" key="template" ns=${this.ns}></foxy-i18n>
+          <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="template-type"
+            data-testid="content-type"
             .value=${contentChoice}
             .items=${['default', 'url', 'clipboard']}
-            ?readonly=${this.readonlySelector.matches('content', true)}
-            ?disabled=${this.in('busy') || this.disabledSelector.matches('content', true)}
+            ?readonly=${isReadonly}
+            ?disabled=${isDisabled}
             @change=${(evt) => {
             if (evt instanceof ChoiceChangeEvent) {
                 this.edit({ content: '', content_url: '' });
@@ -146,9 +182,12 @@ export class TemplateForm extends Base {
             <div slot="url" ?hidden=${contentChoice !== 'url'}>
               <div class="flex items-center mt-0 mb-m">
                 <vaadin-text-field
-                  data-testid="content_url"
-                  value=${ifDefined(this.form.content_url)}
+                  data-testid="content-url"
                   class="mr-s flex-grow"
+                  ?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 });
@@ -156,51 +195,51 @@ export class TemplateForm extends Base {
                 >
                 </vaadin-text-field>
 
-                ${this.form.content_url === ((_a = this.data) === null || _a === void 0 ? void 0 : _a.content_url)
-            ? html `
-                      <vaadin-button
-                        class="relative"
-                        ?disabled=${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>
+                <vaadin-button
+                  data-testid="cache"
+                  class="relative"
+                  ?hidden=${isReadonly || this.form.content_url !== ((_a = this.data) === null || _a === void 0 ? void 0 : _a.content_url)}
+                  ?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
+                    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>
             </div>
 
             <div slot="clipboard" ?hidden=${contentChoice !== 'clipboard'}>
               <vaadin-text-area
                 id="cached-content"
-                data-testid="content"
+                data-testid="content-clipboard"
                 class="w-full mb-m"
-                .value=${this.form.content}
+                ?readonly=${isReadonly}
+                ?disabled=${isDisabled}
+                .value=${live(this.form.content)}
                 @input=${(evt) => {
             const value = evt.currentTarget.value;
             this.edit({ content: value, content_url: '' });
@@ -211,14 +250,15 @@ export class TemplateForm extends Base {
           </x-choice>
         </x-group>
 
-        ${this.renderTemplateOrSlot('content:after')}
+        ${this.renderTemplateOrSlot(`${scope}:after`)}
       </div>
     `;
     }
     __renderTimestamps() {
+        const scope = 'timestamps';
         return html `
       <div>
-        ${this.renderTemplateOrSlot('timestamps:before')}
+        ${this.renderTemplateOrSlot(`${scope}:before`)}
 
         <x-property-table
           data-testid="timestamps"
@@ -233,7 +273,7 @@ export class TemplateForm extends Base {
         >
         </x-property-table>
 
-        ${this.renderTemplateOrSlot('timestamps:after')}
+        ${this.renderTemplateOrSlot(`${scope}:after`)}
       </div>
     `;
     }

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 { CSSResultArray, PropertyDeclarations, TemplateResult, css, html } from 'lit-element';\nimport { Choice, Group, PropertyTable } from '../../private/index';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\n\nimport { ChoiceChangeEvent } from '../../private/events';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { Data } from './types';\nimport { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport { InternalConfirmDialog } from '../../internal/InternalConfirmDialog/InternalConfirmDialog';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { TextAreaElement } from '@vaadin/vaadin-text-field/vaadin-text-area';\nimport { TextFieldElement } from '@vaadin/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nconst NS = 'template-form';\nconst Base = ScopedElementsMixin(\n  ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)))\n);\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 styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        #cached-content::part(input-field) {\n          max-height: 15em;\n        }\n      `,\n    ];\n  }\n\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'vaadin-text-area': customElements.get('vaadin-text-area'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'x-property-table': PropertyTable,\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\">\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  private __renderDescription() {\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('description:before')}\n\n        <vaadin-text-field\n          class=\"w-full mb-s\"\n          label=${this.t('description')}\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('description:after')}\n      </div>\n    `;\n  }\n\n  private __renderContent() {\n    const contentChoice = this.form.content_url\n      ? 'url'\n      : this.form.content\n      ? 'clipboard'\n      : this.__contentChoice;\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('content:before')}\n\n        <x-group frame>\n          <foxy-i18n lang=${this.lang} slot=\"header\" key=\"template\" ns=${this.ns}></foxy-i18n>\n\n          <x-choice\n            data-testid=\"template-type\"\n            .value=${contentChoice}\n            .items=${['default', 'url', 'clipboard']}\n            ?readonly=${this.readonlySelector.matches('content', true)}\n            ?disabled=${this.in('busy') || this.disabledSelector.matches('content', true)}\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\n                  <foxy-i18n\n                    class=\"block text-s opacity-70\"\n                    lang=${this.lang}\n                    key=\"template_${value}_explainer\"\n                    ns=${this.ns}\n                  >\n                  </foxy-i18n>\n                </div>\n              `;\n            })}\n\n            <div slot=\"url\" ?hidden=${contentChoice !== 'url'}>\n              <div class=\"flex items-center mt-0 mb-m\">\n                <vaadin-text-field\n                  data-testid=\"content_url\"\n                  value=${ifDefined(this.form.content_url)}\n                  class=\"mr-s flex-grow\"\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                ${this.form.content_url === this.data?.content_url\n                  ? html`\n                      <vaadin-button\n                        class=\"relative\"\n                        ?disabled=${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                    `\n                  : ''}\n              </div>\n            </div>\n\n            <div slot=\"clipboard\" ?hidden=${contentChoice !== 'clipboard'}>\n              <vaadin-text-area\n                id=\"cached-content\"\n                data-testid=\"content\"\n                class=\"w-full mb-m\"\n                .value=${this.form.content}\n                @input=${(evt: CustomEvent) => {\n                  const value = (evt.currentTarget as TextAreaElement).value;\n                  this.edit({ content: value, content_url: '' });\n                }}\n              >\n              </vaadin-text-area>\n            </div>\n          </x-choice>\n        </x-group>\n\n        ${this.renderTemplateOrSlot('content:after')}\n      </div>\n    `;\n  }\n\n  private __renderTimestamps() {\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('timestamps:before')}\n\n        <x-property-table\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-property-table>\n\n        ${this.renderTemplateOrSlot('timestamps: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') ? `primary ${href ? 'error' : '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\n      this.__cacheState = response.ok ? 'idle' : 'fail';\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 { CSSResultArray, PropertyDeclarations, TemplateResult, css, html } from 'lit-element';\nimport { Choice, Group, PropertyTable } from '../../private/index';\nimport { Data, Templates } 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 { TextAreaElement } from '@vaadin/vaadin-text-field/vaadin-text-area';\nimport { TextFieldElement } from '@vaadin/vaadin-text-field';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { live } from 'lit-html/directives/live';\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 * @slot description:before\n * @slot description:after\n *\n * @slot content:before\n * @slot content: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-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 styles(): CSSResultArray {\n    return [\n      ...super.styles,\n      css`\n        #cached-content::part(input-field) {\n          max-height: 15em;\n        }\n      `,\n    ];\n  }\n\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'vaadin-text-field': customElements.get('vaadin-text-field'),\n      'vaadin-text-area': customElements.get('vaadin-text-area'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'x-property-table': PropertyTable,\n      'x-choice': Choice,\n      'x-group': Group,\n    };\n  }\n\n  templates: Templates = {};\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\">\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  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 isDisabled = !this.in('idle') || this.disabledSelector.matches(scope);\n    const isReadonly = this.readonlySelector.matches(scope);\n    const contentChoice = this.form.content_url\n      ? 'url'\n      : this.form.content\n      ? 'clipboard'\n      : this.__contentChoice;\n\n    return html`\n      <div data-testid=\"content\">\n        ${this.renderTemplateOrSlot(`${scope}:before`)}\n\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\n                  <foxy-i18n\n                    class=\"block text-s opacity-70\"\n                    lang=${this.lang}\n                    key=\"template_${value}_explainer\"\n                    ns=${this.ns}\n                  >\n                  </foxy-i18n>\n                </div>\n              `;\n            })}\n\n            <div slot=\"url\" ?hidden=${contentChoice !== 'url'}>\n              <div class=\"flex items-center mt-0 mb-m\">\n                <vaadin-text-field\n                  data-testid=\"content-url\"\n                  class=\"mr-s flex-grow\"\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\"\n                  ?hidden=${isReadonly || this.form.content_url !== this.data?.content_url}\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            </div>\n\n            <div slot=\"clipboard\" ?hidden=${contentChoice !== 'clipboard'}>\n              <vaadin-text-area\n                id=\"cached-content\"\n                data-testid=\"content-clipboard\"\n                class=\"w-full mb-m\"\n                ?readonly=${isReadonly}\n                ?disabled=${isDisabled}\n                .value=${live(this.form.content)}\n                @input=${(evt: CustomEvent) => {\n                  const value = (evt.currentTarget as TextAreaElement).value;\n                  this.edit({ content: value, content_url: '' });\n                }}\n              >\n              </vaadin-text-area>\n            </div>\n          </x-choice>\n        </x-group>\n\n        ${this.renderTemplateOrSlot(`${scope}:after`)}\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-property-table\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-property-table>\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') ? `primary ${href ? 'error' : '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\n      this.__cacheState = response.ok ? 'idle' : 'fail';\n    } catch {\n      this.__cacheState = 'fail';\n    }\n  }\n}\n"]}

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

@@ -1,3 +1,17 @@
 import { Rels } from '@foxy.io/sdk/backend';
+import { Renderer } from '../../../mixins/configurable';
 import { Resource } from '@foxy.io/sdk/core';
+import { TemplateForm } from './TemplateForm';
 export declare type Data = Resource<Rels.CartIncludeTemplate> | Resource<Rels.CheckoutTemplate> | Resource<Rels.CartTemplate>;
+export declare type Templates = {
+    'description:before'?: Renderer<TemplateForm>;
+    'description:after'?: Renderer<TemplateForm>;
+    'content:before'?: Renderer<TemplateForm>;
+    'content:after'?: Renderer<TemplateForm>;
+    'timestamps:before'?: Renderer<TemplateForm>;
+    'timestamps:after'?: Renderer<TemplateForm>;
+    'create:before'?: Renderer<TemplateForm>;
+    'create:after'?: Renderer<TemplateForm>;
+    'delete:before'?: Renderer<TemplateForm>;
+    'delete:after'?: Renderer<TemplateForm>;
+};

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\n\nexport type Data =\n  | Resource<Rels.CartIncludeTemplate>\n  | Resource<Rels.CheckoutTemplate>\n  | Resource<Rels.CartTemplate>;\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateForm/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Rels } from '@foxy.io/sdk/backend';\nimport { Renderer } from '../../../mixins/configurable';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { TemplateForm } from './TemplateForm';\n\nexport type Data =\n  | Resource<Rels.CartIncludeTemplate>\n  | Resource<Rels.CheckoutTemplate>\n  | Resource<Rels.CartTemplate>;\n\nexport type Templates = {\n  'description:before'?: Renderer<TemplateForm>;\n  'description:after'?: Renderer<TemplateForm>;\n  'content:before'?: Renderer<TemplateForm>;\n  'content:after'?: Renderer<TemplateForm>;\n  'timestamps:before'?: Renderer<TemplateForm>;\n  'timestamps:after'?: Renderer<TemplateForm>;\n  'create:before'?: Renderer<TemplateForm>;\n  'create:after'?: Renderer<TemplateForm>;\n  'delete:before'?: Renderer<TemplateForm>;\n  'delete:after'?: Renderer<TemplateForm>;\n};\n"]}

package/dist/mixins/themeable.js

@@ -1027,6 +1027,12 @@ input::-webkit-date-and-time-value{
   cursor: text;
 }
 
+@media (hover: hover) {
+  .hover-cursor-pointer:hover {
+    cursor: pointer;
+  }
+}
+
 .disabled-cursor-default:disabled {
   cursor: default;
 }
@@ -1292,6 +1298,10 @@ input::-webkit-date-and-time-value{
   border-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
 }
 
+.border-contrast-30 {
+  border-color: var(--lumo-contrast-30pct, hsla(214, 50%, 22%, 0.26));
+}
+
 .border-contrast-50 {
   border-color: var(--lumo-contrast-50pct, hsla(214, 45%, 20%, 0.5));
 }
@@ -1366,6 +1376,10 @@ input::-webkit-date-and-time-value{
   background-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
 }
 
+.bg-contrast-70 {
+  background-color: var(--lumo-contrast-70pct, hsla(214, 42%, 18%, 0.72));
+}
+
 .bg-contrast {
   background-color: var(--lumo-contrast, hsl(214, 35%, 15%));
 }
@@ -1667,14 +1681,14 @@ input::-webkit-date-and-time-value{
   color: var(--lumo-tint, #fff);
 }
 
-.text-contrast-20 {
-  color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
-}
-
 .text-contrast-30 {
   color: var(--lumo-contrast-30pct, hsla(214, 50%, 22%, 0.26));
 }
 
+.text-contrast-70 {
+  color: var(--lumo-contrast-70pct, hsla(214, 42%, 18%, 0.72));
+}
+
 .text-contrast {
   color: var(--lumo-contrast, hsl(214, 35%, 15%));
 }
@@ -1741,10 +1755,6 @@ input::-webkit-date-and-time-value{
   }
 }
 
-.focus-text-primary:focus {
-  color: var(--lumo-primary-text-color, hsl(214, 90%, 52%));
-}
-
 .focus-text-body:focus {
   color: var(--lumo-body-text-color, hsla(214, 40%, 16%, 0.94));
 }
@@ -1886,6 +1896,10 @@ input::-webkit-date-and-time-value{
   --tw-ring-color: var(--lumo-primary-color-50pct, hsla(214, 90%, 52%, 0.5));
 }
 
+.ring-error-50 {
+  --tw-ring-color: var(--lumo-error-color-50pct, hsla(3, 100%, 60%, 0.5));
+}
+
 .ring-success-50 {
   --tw-ring-color: var(--lumo-success-color-50pct, hsla(145, 76%, 44%, 0.55));
 }
@@ -1898,18 +1912,14 @@ input::-webkit-date-and-time-value{
   --tw-ring-color: var(--lumo-primary-color-50pct, hsla(214, 90%, 52%, 0.5));
 }
 
-.focus-ring-error-50:focus {
-  --tw-ring-color: var(--lumo-error-color-50pct, hsla(3, 100%, 60%, 0.5));
+.ring-offset-2 {
+  --tw-ring-offset-width: 2px;
 }
 
 .ring-offset-4 {
   --tw-ring-offset-width: 4px;
 }
 
-.focus-ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
-}
-
 .ring-offset-base {
   --tw-ring-offset-color: var(--lumo-base-color, #fff);
 }
@@ -1972,6 +1982,12 @@ input::-webkit-date-and-time-value{
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-100 {
   transition-duration: 100ms;
 }

package/dist/mixins/themeable.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeable.js","sourceRoot":"","sources":["../../src/mixins/themeable.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAEtE,OAAO,EAA0C,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,EAAE,eAAe,EAAE,wBAAqB;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAI/D,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAkB,EACkB,EAAE;IACtC,OAAO,MAAM,gBAAiB,SAAQ,WAAW;QAC/C,MAAM,KAAK,MAAM;YACf,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;YAEjC,OAAO;gBACL,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClF,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqHF;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,OAAgB,SAAU,SAAQ,mBAAmB,CACzD,eAAe,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAC5C;CAAG","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\nimport { CSSResult, CSSResultArray, Constructor, LitElement, css } from 'lit-element';\n\nimport { ResponsiveMixin } from './responsive';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\n\ntype Base = Constructor<LitElement> & { styles?: CSSResult | CSSResultArray | CSSStyleSheet };\n\nexport const ThemeableMixin = <TBase extends Base>(\n  BaseElement: TBase\n): TBase & { styles: CSSResultArray } => {\n  return class ThemeableElement extends BaseElement {\n    static get styles(): CSSResultArray {\n      const originalCSS = super.styles;\n\n      return [\n        ...(originalCSS ? (Array.isArray(originalCSS) ? originalCSS : [originalCSS]) : []),\n        css`\n          @tailwind base;\n\n          * {\n            -webkit-tap-highlight-color: transparent;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n          }\n\n          :host {\n            display: block;\n          }\n\n          details > summary::-webkit-details-marker {\n            display: none;\n          }\n\n          details > summary {\n            list-style: none;\n          }\n\n          vaadin-select {\n            margin-top: -4px;\n            margin-bottom: -4px;\n          }\n\n          vaadin-text-area,\n          vaadin-text-field,\n          vaadin-date-picker,\n          vaadin-email-field,\n          vaadin-number-field,\n          vaadin-custom-field,\n          vaadin-integer-field,\n          vaadin-password-field,\n          vaadin-combo-box::part(text-field) {\n            padding-top: 0;\n            padding-bottom: 0;\n          }\n\n          vaadin-date-picker::part(text-field) {\n            padding-top: 0;\n            padding-bottom: 0;\n          }\n\n          vaadin-button {\n            margin: 0;\n          }\n\n          vaadin-checkbox::part(checkbox) {\n            margin: 0;\n          }\n\n          vaadin-checkbox::part(label) {\n            margin: 0.1875em var(--lumo-space-m);\n          }\n\n          .appearance-none {\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            appearance: none;\n          }\n\n          .appearance-none::-webkit-calendar-picker-indicator,\n          .appearance-none::-webkit-outer-spin-button,\n          .appearance-none::-webkit-inner-spin-button,\n          .appearance-none::-webkit-list-button {\n            opacity: 0 !important;\n            width: 0 !important;\n            margin: 0 !important;\n            padding: 0 !important;\n          }\n\n          input::-webkit-date-and-time-value {\n            text-align: inherit !important;\n          }\n\n          @tailwind components;\n\n          @tailwind utilities;\n\n          @layer utilities {\n            .border-radius-overflow-fix {\n              -webkit-mask-image: -webkit-radial-gradient(white, black);\n            }\n\n            @variants sm, md, lg, xl {\n              .grid-rows-auto {\n                grid-auto-rows: 1fr;\n              }\n\n              .icon-inline {\n                --iron-icon-height: 1em;\n                --iron-icon-width: 1em;\n              }\n\n              .bg-blurred {\n                backdrop-filter: blur(25px);\n                background: var(--lumo-tint-80pct);\n              }\n\n              .max-w-modal {\n                max-width: 28rem;\n              }\n\n              .w-narrow-modal {\n                width: 18rem;\n              }\n\n              .snap-x-mandatory {\n                scroll-snap-type: x mandatory;\n              }\n\n              .snap-start {\n                scroll-snap-align: start;\n              }\n            }\n          }\n        `,\n      ];\n    }\n  };\n};\n\n/**\n * One of the base classes for each rel-specific element in the collection\n * providing shared TailwindCSS styles for Shadow DOM content.\n * This class MUST NOT be used on its own (hence the `abstract` keyword) or\n * referenced externally (outside of the package).\n *\n * @deprecated\n */\nexport abstract class Themeable extends ScopedElementsMixin(\n  ResponsiveMixin(ThemeableMixin(LitElement))\n) {}\n"]}
+{"version":3,"file":"themeable.js","sourceRoot":"","sources":["../../src/mixins/themeable.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\nimport { CSSResult, CSSResultArray, Constructor, LitElement, css } from 'lit-element';\n\nimport { ResponsiveMixin } from './responsive';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\n\ntype Base = Constructor<LitElement> & { styles?: CSSResult | CSSResultArray | CSSStyleSheet };\n\nexport const ThemeableMixin = <TBase extends Base>(\n  BaseElement: TBase\n): TBase & { styles: CSSResultArray } => {\n  return class ThemeableElement extends BaseElement {\n    static get styles(): CSSResultArray {\n      const originalCSS = super.styles;\n\n      return [\n        ...(originalCSS ? (Array.isArray(originalCSS) ? originalCSS : [originalCSS]) : []),\n        css`\n          @tailwind base;\n\n          * {\n            -webkit-tap-highlight-color: transparent;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n          }\n\n          :host {\n            display: block;\n          }\n\n          details > summary::-webkit-details-marker {\n            display: none;\n          }\n\n          details > summary {\n            list-style: none;\n          }\n\n          vaadin-select {\n            margin-top: -4px;\n            margin-bottom: -4px;\n          }\n\n          vaadin-text-area,\n          vaadin-text-field,\n          vaadin-date-picker,\n          vaadin-email-field,\n          vaadin-number-field,\n          vaadin-custom-field,\n          vaadin-integer-field,\n          vaadin-password-field,\n          vaadin-combo-box::part(text-field) {\n            padding-top: 0;\n            padding-bottom: 0;\n          }\n\n          vaadin-date-picker::part(text-field) {\n            padding-top: 0;\n            padding-bottom: 0;\n          }\n\n          vaadin-button {\n            margin: 0;\n          }\n\n          vaadin-checkbox::part(checkbox) {\n            margin: 0;\n          }\n\n          vaadin-checkbox::part(label) {\n            margin: 0.1875em var(--lumo-space-m);\n          }\n\n          .appearance-none {\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            appearance: none;\n          }\n\n          .appearance-none::-webkit-calendar-picker-indicator,\n          .appearance-none::-webkit-outer-spin-button,\n          .appearance-none::-webkit-inner-spin-button,\n          .appearance-none::-webkit-list-button {\n            opacity: 0 !important;\n            width: 0 !important;\n            margin: 0 !important;\n            padding: 0 !important;\n          }\n\n          input::-webkit-date-and-time-value {\n            text-align: inherit !important;\n          }\n\n          @tailwind components;\n\n          @tailwind utilities;\n\n          @layer utilities {\n            .border-radius-overflow-fix {\n              -webkit-mask-image: -webkit-radial-gradient(white, black);\n            }\n\n            @variants sm, md, lg, xl {\n              .grid-rows-auto {\n                grid-auto-rows: 1fr;\n              }\n\n              .icon-inline {\n                --iron-icon-height: 1em;\n                --iron-icon-width: 1em;\n              }\n\n              .bg-blurred {\n                backdrop-filter: blur(25px);\n                background: var(--lumo-tint-80pct);\n              }\n\n              .max-w-modal {\n                max-width: 28rem;\n              }\n\n              .w-narrow-modal {\n                width: 18rem;\n              }\n\n              .snap-x-mandatory {\n                scroll-snap-type: x mandatory;\n              }\n\n              .snap-start {\n                scroll-snap-align: start;\n              }\n            }\n          }\n        `,\n      ];\n    }\n  };\n};\n\n/**\n * One of the base classes for each rel-specific element in the collection\n * providing shared TailwindCSS styles for Shadow DOM content.\n * This class MUST NOT be used on its own (hence the `abstract` keyword) or\n * referenced externally (outside of the package).\n *\n * @deprecated\n */\nexport abstract class Themeable extends ScopedElementsMixin(\n  ResponsiveMixin(ThemeableMixin(LitElement))\n) {}\n"]}

package/dist/mixins/translatable.js

@@ -164,7 +164,7 @@ export const TranslatableMixin = (BaseElement, defaultNS = '') => {
                         .map((v, i, a) => `${v}:${[...a.slice(i + 1), key].join('.')}`),
                     `shared:${key}`,
                 ];
-                return I18nElement.i18next.t(keys, options).toString();
+                return I18nElement.i18next.t(keys, { lng: this.lang, ...options }).toString();
             };
         }
         static get properties() {

package/dist/mixins/translatable.js.map

@@ -1 +1 @@
-{"version":3,"file":"translatable.js","sourceRoot":"","sources":["../../src/mixins/translatable.ts"],"names":[],"mappings":"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","sourcesContent":["import { Constructor, LitElement, PropertyDeclarations } from 'lit-element';\nimport i18next, { FormatFunction, StringMap, TFunction, i18n } from 'i18next';\n\nimport HttpApi from 'i18next-http-backend';\nimport { I18n } from '../elements/public/I18n/I18n';\nimport { Themeable } from './themeable';\nimport { cdn } from '../env';\n\n/**\n * One of the base classes for each rel-specific element in the collection,\n * providing internationalization capabilities to the derived components.\n * This class MUST NOT be used on its own (hence the `abstract` keyword) or\n * referenced externally (outside of the package).\n *\n * @deprecated\n */\nexport abstract class Translatable extends Themeable {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      lang: { type: String, noAccessor: true },\n      ns: { type: String, noAccessor: true },\n    };\n  }\n\n  /**\n   * i18next formatter that converts given value to lowecase.\n   * @see https://www.i18next.com/translation-function/formatting\n   */\n  private static __fLowercase: FormatFunction = (value): string => {\n    return value.toLowerCase();\n  };\n\n  /**\n   * i18next formatter that presents an array of serializable items\n   * as `[0], [1], [...] and [length - 1]`. For example, given an array like\n   * the following: `['a', 'b', 'c']`, it will output `'a, b and c'`.\n   * @see https://www.i18next.com/translation-function/formatting\n   */\n  private static __fList: FormatFunction = (value): string => {\n    return (value as string[])\n      .map((v, i, a) => {\n        if (i === 0) return v;\n        const part = i === a.length - 1 ? ` $t(and) ` : ',';\n        return `${part} ${v}`;\n      })\n      .join('');\n  };\n\n  /**\n   * Chooses the right i18next formatter for the given template.\n   * @see https://www.i18next.com/translation-function/formatting\n   */\n  private static __f: FormatFunction = (...args): string => {\n    const value = args[0];\n    const formats = args[1]?.split(' ') ?? [];\n\n    return formats.reduce((result, format) => {\n      switch (format) {\n        case 'lowercase':\n          return Translatable.__fLowercase(result);\n        case 'list':\n          return Translatable.__fList(result);\n        default:\n          return result;\n      }\n    }, value);\n  };\n\n  private static __whenI18NReady: Promise<TFunction>;\n\n  private static __isI18NReady = false;\n\n  private static __i18n: i18n;\n\n  private __lang = (this._i18n.options.fallbackLng as string[])[0];\n\n  private __ns = (this._i18n.options.fallbackNS as string[])[0];\n\n  /**\n   * Creates class instance and starts loading missing translations\n   * in background. Triggers render when ready.\n   *\n   * @param defaultNS Name of the folder translations for this component are stored in. Usually a node name without vendor prefix.\n   */\n  constructor(defaultNS = 'global') {\n    super();\n    this.ns = defaultNS;\n    this._whenI18nReady.then(() => this.requestUpdate());\n  }\n\n  /**\n   * Contains the language this component presents its translatable\n   * content in. Assigning a value to this property will load new\n   * translations in background and trigger a render afterwards.\n   *\n   * **Example:** `\"en\"`\n   */\n  public get lang(): string {\n    return this.__lang;\n  }\n\n  public set lang(value: string) {\n    if (!value || value === 'undefined') return;\n    this.__lang = value;\n    this._i18n.loadLanguages(value).then(() => {\n      if (this.__lang === value) this.requestUpdate();\n    });\n  }\n\n  /**\n   * The namespace to look for the translations in. We use this property to\n   * sync namespace settings with the parent element and it's highly unlikely\n   * that you'll ever need to set or read it in your code.\n   *\n   * **Example:** `\"admin\"`\n   */\n  public get ns(): string {\n    return this.__ns;\n  }\n\n  public set ns(value: string) {\n    this.__ns = value;\n    this._i18n.loadNamespaces(value).then(() => {\n      if (this.__ns === value) this.requestUpdate();\n    });\n  }\n\n  private static __initI18N() {\n    this.__i18n = i18next.createInstance();\n    this.__i18n.use(HttpApi);\n\n    this.__whenI18NReady = this.__i18n.init({\n      ns: ['global'],\n      supportedLngs: ['nl', 'en', 'es', 'sv', 'fi', 'fr', 'de', 'zh', 'no', 'it'],\n      interpolation: { format: Translatable.__f },\n      fallbackLng: 'en',\n      fallbackNS: 'global',\n      defaultNS: 'global',\n      detection: {\n        order: ['querystring', 'navigator', 'htmlTag', 'path', 'subdomain'],\n        caches: [],\n      },\n      backend: {\n        loadPath: `${cdn}/translations/{{ns}}/{{lng}}.json`,\n      },\n    });\n\n    this.__whenI18NReady.then(() => (this.__isI18NReady = true));\n\n    return this.__i18n;\n  }\n\n  protected get _i18n(): i18n {\n    return Translatable.__i18n ?? Translatable.__initI18N();\n  }\n\n  protected get _whenI18nReady(): Promise<TFunction> {\n    return Translatable.__whenI18NReady;\n  }\n\n  protected get _isI18nReady(): boolean {\n    return Translatable.__isI18NReady;\n  }\n\n  protected get _t(): TFunction {\n    const ns = [this.__ns, this._i18n.options.fallbackNS as string];\n    return this._i18n.getFixedT(this.__lang, ns);\n  }\n}\n\ntype Base = Constructor<LitElement> & { properties?: PropertyDeclarations };\ntype Translator = (key: string, options?: StringMap) => string;\n\nexport declare class TranslatableMixinHost {\n  /** Optional ISO 639-1 code describing the language element content is written in. */\n  lang: string;\n\n  /**\n   * Namespace used by this element.\n   * @since 1.4.0\n   */\n  ns: string;\n\n  /**\n   * Translation function from i18next fixed to the current language and element namespace.\n   * @since 1.4.0\n   */\n  get t(): Translator;\n}\n\nexport const TranslatableMixin = <T extends Base>(\n  BaseElement: T,\n  defaultNS = ''\n): T & Constructor<TranslatableMixinHost> & { defaultNS: string } => {\n  return class TranslatableElement extends BaseElement {\n    static get properties(): PropertyDeclarations {\n      return {\n        ...super.properties,\n        lang: { type: String },\n        ns: { type: String },\n      };\n    }\n\n    static get defaultNS(): string {\n      return defaultNS;\n    }\n\n    lang = '';\n\n    ns = defaultNS;\n\n    t: Translator = (key, options) => {\n      const I18nElement = customElements.get('foxy-i18n') as typeof I18n | undefined;\n\n      if (!I18nElement) return key;\n\n      const keys = [\n        ...[defaultNS, ...this.ns.split(' ').reverse()]\n          .map(v => v.trim())\n          .filter((v, i, a) => a.indexOf(v) === i && v.length > 0)\n          .reverse()\n          .map((v, i, a) => `${v}:${[...a.slice(i + 1), key].join('.')}`),\n        `shared:${key}`,\n      ];\n\n      return I18nElement.i18next.t(keys, options).toString();\n    };\n\n    private __untrackTranslations?: () => void;\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      const I18nElement = customElements.get('foxy-i18n') as typeof I18n | undefined;\n      this.__untrackTranslations = I18nElement?.onTranslationChange(() => this.requestUpdate());\n    }\n\n    /** @readonly */\n    updated(changedProperties: Map<keyof I18n, unknown>): void {\n      super.updated(changedProperties);\n\n      const I18nElement = customElements.get('foxy-i18n') as typeof I18n | undefined;\n      if (!I18nElement) return;\n\n      if (changedProperties.has('lang')) I18nElement.i18next.loadLanguages(this.lang);\n      if (changedProperties.has('ns')) I18nElement.i18next.loadNamespaces(this.ns.split(' '));\n    }\n\n    disconnectedCallback(): void {\n      super.disconnectedCallback();\n      this.__untrackTranslations?.();\n    }\n  };\n};\n"]}
+{"version":3,"file":"translatable.js","sourceRoot":"","sources":["../../src/mixins/translatable.ts"],"names":[],"mappings":"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","sourcesContent":["import { Constructor, LitElement, PropertyDeclarations } from 'lit-element';\nimport i18next, { FormatFunction, StringMap, TFunction, i18n } from 'i18next';\n\nimport HttpApi from 'i18next-http-backend';\nimport { I18n } from '../elements/public/I18n/I18n';\nimport { Themeable } from './themeable';\nimport { cdn } from '../env';\n\n/**\n * One of the base classes for each rel-specific element in the collection,\n * providing internationalization capabilities to the derived components.\n * This class MUST NOT be used on its own (hence the `abstract` keyword) or\n * referenced externally (outside of the package).\n *\n * @deprecated\n */\nexport abstract class Translatable extends Themeable {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      lang: { type: String, noAccessor: true },\n      ns: { type: String, noAccessor: true },\n    };\n  }\n\n  /**\n   * i18next formatter that converts given value to lowecase.\n   * @see https://www.i18next.com/translation-function/formatting\n   */\n  private static __fLowercase: FormatFunction = (value): string => {\n    return value.toLowerCase();\n  };\n\n  /**\n   * i18next formatter that presents an array of serializable items\n   * as `[0], [1], [...] and [length - 1]`. For example, given an array like\n   * the following: `['a', 'b', 'c']`, it will output `'a, b and c'`.\n   * @see https://www.i18next.com/translation-function/formatting\n   */\n  private static __fList: FormatFunction = (value): string => {\n    return (value as string[])\n      .map((v, i, a) => {\n        if (i === 0) return v;\n        const part = i === a.length - 1 ? ` $t(and) ` : ',';\n        return `${part} ${v}`;\n      })\n      .join('');\n  };\n\n  /**\n   * Chooses the right i18next formatter for the given template.\n   * @see https://www.i18next.com/translation-function/formatting\n   */\n  private static __f: FormatFunction = (...args): string => {\n    const value = args[0];\n    const formats = args[1]?.split(' ') ?? [];\n\n    return formats.reduce((result, format) => {\n      switch (format) {\n        case 'lowercase':\n          return Translatable.__fLowercase(result);\n        case 'list':\n          return Translatable.__fList(result);\n        default:\n          return result;\n      }\n    }, value);\n  };\n\n  private static __whenI18NReady: Promise<TFunction>;\n\n  private static __isI18NReady = false;\n\n  private static __i18n: i18n;\n\n  private __lang = (this._i18n.options.fallbackLng as string[])[0];\n\n  private __ns = (this._i18n.options.fallbackNS as string[])[0];\n\n  /**\n   * Creates class instance and starts loading missing translations\n   * in background. Triggers render when ready.\n   *\n   * @param defaultNS Name of the folder translations for this component are stored in. Usually a node name without vendor prefix.\n   */\n  constructor(defaultNS = 'global') {\n    super();\n    this.ns = defaultNS;\n    this._whenI18nReady.then(() => this.requestUpdate());\n  }\n\n  /**\n   * Contains the language this component presents its translatable\n   * content in. Assigning a value to this property will load new\n   * translations in background and trigger a render afterwards.\n   *\n   * **Example:** `\"en\"`\n   */\n  public get lang(): string {\n    return this.__lang;\n  }\n\n  public set lang(value: string) {\n    if (!value || value === 'undefined') return;\n    this.__lang = value;\n    this._i18n.loadLanguages(value).then(() => {\n      if (this.__lang === value) this.requestUpdate();\n    });\n  }\n\n  /**\n   * The namespace to look for the translations in. We use this property to\n   * sync namespace settings with the parent element and it's highly unlikely\n   * that you'll ever need to set or read it in your code.\n   *\n   * **Example:** `\"admin\"`\n   */\n  public get ns(): string {\n    return this.__ns;\n  }\n\n  public set ns(value: string) {\n    this.__ns = value;\n    this._i18n.loadNamespaces(value).then(() => {\n      if (this.__ns === value) this.requestUpdate();\n    });\n  }\n\n  private static __initI18N() {\n    this.__i18n = i18next.createInstance();\n    this.__i18n.use(HttpApi);\n\n    this.__whenI18NReady = this.__i18n.init({\n      ns: ['global'],\n      supportedLngs: ['nl', 'en', 'es', 'sv', 'fi', 'fr', 'de', 'zh', 'no', 'it'],\n      interpolation: { format: Translatable.__f },\n      fallbackLng: 'en',\n      fallbackNS: 'global',\n      defaultNS: 'global',\n      detection: {\n        order: ['querystring', 'navigator', 'htmlTag', 'path', 'subdomain'],\n        caches: [],\n      },\n      backend: {\n        loadPath: `${cdn}/translations/{{ns}}/{{lng}}.json`,\n      },\n    });\n\n    this.__whenI18NReady.then(() => (this.__isI18NReady = true));\n\n    return this.__i18n;\n  }\n\n  protected get _i18n(): i18n {\n    return Translatable.__i18n ?? Translatable.__initI18N();\n  }\n\n  protected get _whenI18nReady(): Promise<TFunction> {\n    return Translatable.__whenI18NReady;\n  }\n\n  protected get _isI18nReady(): boolean {\n    return Translatable.__isI18NReady;\n  }\n\n  protected get _t(): TFunction {\n    const ns = [this.__ns, this._i18n.options.fallbackNS as string];\n    return this._i18n.getFixedT(this.__lang, ns);\n  }\n}\n\ntype Base = Constructor<LitElement> & { properties?: PropertyDeclarations };\ntype Translator = (key: string, options?: StringMap) => string;\n\nexport declare class TranslatableMixinHost {\n  /** Optional ISO 639-1 code describing the language element content is written in. */\n  lang: string;\n\n  /**\n   * Namespace used by this element.\n   * @since 1.4.0\n   */\n  ns: string;\n\n  /**\n   * Translation function from i18next fixed to the current language and element namespace.\n   * @since 1.4.0\n   */\n  get t(): Translator;\n}\n\nexport const TranslatableMixin = <T extends Base>(\n  BaseElement: T,\n  defaultNS = ''\n): T & Constructor<TranslatableMixinHost> & { defaultNS: string } => {\n  return class TranslatableElement extends BaseElement {\n    static get properties(): PropertyDeclarations {\n      return {\n        ...super.properties,\n        lang: { type: String },\n        ns: { type: String },\n      };\n    }\n\n    static get defaultNS(): string {\n      return defaultNS;\n    }\n\n    lang = '';\n\n    ns = defaultNS;\n\n    t: Translator = (key, options) => {\n      const I18nElement = customElements.get('foxy-i18n') as typeof I18n | undefined;\n\n      if (!I18nElement) return key;\n\n      const keys = [\n        ...[defaultNS, ...this.ns.split(' ').reverse()]\n          .map(v => v.trim())\n          .filter((v, i, a) => a.indexOf(v) === i && v.length > 0)\n          .reverse()\n          .map((v, i, a) => `${v}:${[...a.slice(i + 1), key].join('.')}`),\n        `shared:${key}`,\n      ];\n\n      return I18nElement.i18next.t(keys, { lng: this.lang, ...options }).toString();\n    };\n\n    private __untrackTranslations?: () => void;\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      const I18nElement = customElements.get('foxy-i18n') as typeof I18n | undefined;\n      this.__untrackTranslations = I18nElement?.onTranslationChange(() => this.requestUpdate());\n    }\n\n    /** @readonly */\n    updated(changedProperties: Map<keyof I18n, unknown>): void {\n      super.updated(changedProperties);\n\n      const I18nElement = customElements.get('foxy-i18n') as typeof I18n | undefined;\n      if (!I18nElement) return;\n\n      if (changedProperties.has('lang')) I18nElement.i18next.loadLanguages(this.lang);\n      if (changedProperties.has('ns')) I18nElement.i18next.loadNamespaces(this.ns.split(' '));\n    }\n\n    disconnectedCallback(): void {\n      super.disconnectedCallback();\n      this.__untrackTranslations?.();\n    }\n  };\n};\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foxy.io/elements",
   "type": "module",
-  "version": "1.14.0-beta.7",
+  "version": "1.14.1",
   "description": "E-commerce web components by Foxy.",
   "repository": {
     "type": "git",