@foxy.io/elements 1.14.0-beta.8 → 1.14.2

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

@@ -1 +1 @@
-{"version":3,"file":"EmailTemplateForm.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateForm/EmailTemplateForm.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 { ifDefined } from 'lit-html/directives/if-defined';\n\nconst NS = 'email-template-form';\nconst Base = ScopedElementsMixin(\n  ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\nexport class EmailTemplateForm 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    return html`\n      <div data-testid=\"content\">\n        ${this.renderTemplateOrSlot('content:before')}\n\n        <div class=\"space-y-l\">\n          ${this.__renderContentVariant('content_text_url', 'content_text', 'text_template')}\n          ${this.__renderContentVariant('content_html_url', 'content_html', 'html_template')}\n        </div>\n\n        ${this.renderTemplateOrSlot('content:after')}\n      </div>\n    `;\n  }\n\n  private __renderContentVariant(\n    urlPath: 'content_text_url' | 'content_html_url',\n    textPath: 'content_text' | 'content_html',\n    header: string\n  ) {\n    const isDisabled = !this.in('idle') || this.disabledSelector.matches('content', true);\n    const isReadonly = this.readonlySelector.matches('content', true);\n    const contentChoice = this.form[urlPath]\n      ? 'url'\n      : this.form[textPath]\n      ? 'clipboard'\n      : this.__contentChoice;\n\n    return html`\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=${header}\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        <x-choice\n          data-testid=\"${textPath.replace('_', '-')}-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({ [textPath]: '', [urlPath]: '' });\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=\"${textPath.replace('_', '-')}-url\"\n                value=${ifDefined(this.form[urlPath])}\n                class=\"mr-s flex-grow\"\n                ?readonly=${isReadonly}\n                ?disabled=${isDisabled}\n                @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n                @input=${(evt: CustomEvent) => {\n                  const value = (evt.currentTarget as TextFieldElement).value;\n                  this.edit({ [textPath]: '', [urlPath]: value });\n                }}\n              >\n              </vaadin-text-field>\n\n              <vaadin-button\n                data-testid=\"${textPath.replace('_', '-')}-cache\"\n                class=\"relative\"\n                ?disabled=${isDisabled || this.__cacheState === 'busy'}\n                ?hidden=${isReadonly || this.form[urlPath] !== this.data?.[urlPath]}\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              data-testid=\"${textPath.replace('_', '-')}-clipboard\"\n              id=\"cached-content\"\n              class=\"w-full mb-m\"\n              ?readonly=${isReadonly}\n              ?disabled=${isDisabled}\n              .value=${this.form[textPath]}\n              @input=${(evt: CustomEvent) => {\n                const value = (evt.currentTarget as TextAreaElement).value;\n                this.edit({ [textPath]: value, [urlPath]: '' });\n              }}\n            >\n            </vaadin-text-area>\n          </div>\n        </x-choice>\n      </x-group>\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 EmailTemplateForm.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":"EmailTemplateForm.js","sourceRoot":"","sources":["../../../../src/elements/public/EmailTemplateForm/EmailTemplateForm.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 { ifDefined } from 'lit-html/directives/if-defined';\n\nconst NS = 'email-template-form';\nconst Base = ScopedElementsMixin(\n  ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Form element for creating or editing email templates (`fx:email_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-email-template-form\n * @since 1.14.0\n */\nexport class EmailTemplateForm 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    return html`\n      <div data-testid=\"content\">\n        ${this.renderTemplateOrSlot('content:before')}\n\n        <div class=\"space-y-l\">\n          ${this.__renderContentVariant('content_text_url', 'content_text', 'text_template')}\n          ${this.__renderContentVariant('content_html_url', 'content_html', 'html_template')}\n        </div>\n\n        ${this.renderTemplateOrSlot('content:after')}\n      </div>\n    `;\n  }\n\n  private __renderContentVariant(\n    urlPath: 'content_text_url' | 'content_html_url',\n    textPath: 'content_text' | 'content_html',\n    header: string\n  ) {\n    const isDisabled = !this.in('idle') || this.disabledSelector.matches('content', true);\n    const isReadonly = this.readonlySelector.matches('content', true);\n    const contentChoice = this.form[urlPath]\n      ? 'url'\n      : this.form[textPath]\n      ? 'clipboard'\n      : this.__contentChoice;\n\n    return html`\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=${header}\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        <x-choice\n          data-testid=\"${textPath.replace('_', '-')}-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({ [textPath]: '', [urlPath]: '' });\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=\"${textPath.replace('_', '-')}-url\"\n                value=${ifDefined(this.form[urlPath])}\n                class=\"mr-s flex-grow\"\n                ?readonly=${isReadonly}\n                ?disabled=${isDisabled}\n                @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.submit()}\n                @input=${(evt: CustomEvent) => {\n                  const value = (evt.currentTarget as TextFieldElement).value;\n                  this.edit({ [textPath]: '', [urlPath]: value });\n                }}\n              >\n              </vaadin-text-field>\n\n              <vaadin-button\n                data-testid=\"${textPath.replace('_', '-')}-cache\"\n                class=\"relative\"\n                ?disabled=${isDisabled || this.__cacheState === 'busy'}\n                ?hidden=${isReadonly || this.form[urlPath] !== this.data?.[urlPath]}\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              data-testid=\"${textPath.replace('_', '-')}-clipboard\"\n              id=\"cached-content\"\n              class=\"w-full mb-m\"\n              ?readonly=${isReadonly}\n              ?disabled=${isDisabled}\n              .value=${this.form[textPath]}\n              @input=${(evt: CustomEvent) => {\n                const value = (evt.currentTarget as TextAreaElement).value;\n                this.edit({ [textPath]: value, [urlPath]: '' });\n              }}\n            >\n            </vaadin-text-area>\n          </div>\n        </x-choice>\n      </x-group>\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 EmailTemplateForm.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/I18n/I18n.js

@@ -104,7 +104,7 @@ I18n.FetchEvent = FetchEvent;
 /** Shared [i18next](https://www.i18next.com) instance for all I18n elements. */
 I18n.i18next = i18next.createInstance().use(backend);
 I18n.i18next.init({
-    interpolation: { format },
+    interpolation: { format, escapeValue: false },
     fallbackLng: 'en',
     fallbackNS: 'shared',
     defaultNS: 'shared',

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

@@ -1 +1 @@
-{"version":3,"file":"I18n.js","sourceRoot":"","sources":["../../../../src/elements/public/I18n/I18n.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\nimport i18next, { StringMap, TOptions } from 'i18next';\n\nimport { FetchEvent } from '../NucleonElement/FetchEvent';\nimport { Gateways } from './types';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { backend } from './backend';\nimport { format } from './format/index';\n\n/**\n * Custom element for effortless localization with i18next.\n *\n * @fires I18n#fetch - Instance of `I18n.FetchEvent`. Emitted before each translation request.\n *\n * @element foxy-i18n\n * @since 1.1.0\n */\nexport class I18n extends TranslatableMixin(LitElement, '') {\n  /** Instances of this event are dispatched on an element before each translation request. */\n  static readonly FetchEvent = FetchEvent;\n\n  /** Shared [i18next](https://www.i18next.com) instance for all I18n elements. */\n  static readonly i18next = i18next.createInstance().use(backend);\n\n  /**\n   * Registers a joint event listener for all i18next events that indicate\n   * the availability of new translations. If you're using `I18n.i18next` to localize\n   * your components, this function will call the provided handler every time an update is needed.\n   *\n   * @param handler Callback to invoke when translation changes.\n   * @example const unsubscribe = I18n.onTranslationChange(triggerUpdate);\n   */\n  static onTranslationChange(handler: () => void): () => void {\n    const i18nextEvents = ['initialized', 'loaded'] as const;\n    const storeEvents = ['removed', 'added'] as const;\n\n    i18nextEvents.forEach(type => I18n.i18next.on(type, handler));\n    storeEvents.forEach(type => I18n.i18next.store.on(type, handler));\n\n    return () => {\n      i18nextEvents.forEach(type => I18n.i18next.off(type, handler));\n      storeEvents.forEach(type => I18n.i18next.store.off(type, handler));\n    };\n  }\n\n  /**\n   * Registers a global event listener that calls `handler` every time an i18next resource\n   * is downloaded by `foxy-i18n`. Allows devs to specify resource location and/or fetch it\n   * via a different channel (e.g. web sockets or using a localization SaaS).\n   *\n   * @param handler Callback to invoke on resource fetch.\n   * @example const unsubscribe = I18n.onResourceFetch((ns, lang) => fetch(`path/to/${ns}/${lang}`));\n   */\n  static onResourceFetch(handler: (ns: string, lang: string) => Promise<Response>): () => void {\n    const handleFetch = (evt: unknown) => {\n      if (evt instanceof FetchEvent && evt.request.url.startsWith('foxy://i18n/')) {\n        const [lang, ns] = evt.request.url.split('/').reverse();\n        evt.respondWith(handler(ns, lang));\n      }\n    };\n\n    addEventListener('fetch', handleFetch);\n    return () => removeEventListener('fetch', handleFetch);\n  }\n\n  /**\n   * Adds payment gateway names to the i18next store. Fetch `fx:hosted_payment_gateways`\n   * and `fx:payment_gateways` and call this method to make gateway names available to\n   * elements like `foxy-payment-card`.\n   *\n   * @param param0 `fx:hosted_payment_gateways` or `fx:payment_gateways`\n   * @example I18n.setGateways({ values: { authorize: { name: 'Authorize.Net' }}})\n   */\n  static setGateways({ values }: Gateways): void {\n    for (const id in values) {\n      this.i18next.addResource('en', 'gateways', `gateways.${id}`, values[id].name);\n    }\n  }\n\n  /** @readonly */\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Object },\n      key: { type: String },\n    };\n  }\n\n  /**\n   * Optional i18next translation function\n   * [options](https://www.i18next.com/translation-function/essentials#overview-options).\n   */\n  options: TOptions<StringMap> = {};\n\n  /**\n   * Optional key to translate. Empty by default (renders nothing).\n   * See [i18next docs](https://www.i18next.com/translation-function/essentials#accessing-keys) for more info.\n   */\n  key = '';\n\n  private __unsubscribe?: () => void;\n\n  /** @readonly */\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.__unsubscribe = I18n.onTranslationChange(() => this.requestUpdate());\n  }\n\n  /** @readonly */\n  render(): TemplateResult {\n    return html`<span>${this.t(this.key, { ...this.options, lng: this.lang })}</span>`;\n  }\n\n  /** @readonly */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__unsubscribe?.();\n  }\n}\n\nI18n.i18next.init({\n  interpolation: { format },\n  fallbackLng: 'en',\n  fallbackNS: 'shared',\n  defaultNS: 'shared',\n  ns: ['shared'],\n});\n"]}
+{"version":3,"file":"I18n.js","sourceRoot":"","sources":["../../../../src/elements/public/I18n/I18n.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyDeclarations, TemplateResult, html } from 'lit-element';\nimport i18next, { StringMap, TOptions } from 'i18next';\n\nimport { FetchEvent } from '../NucleonElement/FetchEvent';\nimport { Gateways } from './types';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { backend } from './backend';\nimport { format } from './format/index';\n\n/**\n * Custom element for effortless localization with i18next.\n *\n * @fires I18n#fetch - Instance of `I18n.FetchEvent`. Emitted before each translation request.\n *\n * @element foxy-i18n\n * @since 1.1.0\n */\nexport class I18n extends TranslatableMixin(LitElement, '') {\n  /** Instances of this event are dispatched on an element before each translation request. */\n  static readonly FetchEvent = FetchEvent;\n\n  /** Shared [i18next](https://www.i18next.com) instance for all I18n elements. */\n  static readonly i18next = i18next.createInstance().use(backend);\n\n  /**\n   * Registers a joint event listener for all i18next events that indicate\n   * the availability of new translations. If you're using `I18n.i18next` to localize\n   * your components, this function will call the provided handler every time an update is needed.\n   *\n   * @param handler Callback to invoke when translation changes.\n   * @example const unsubscribe = I18n.onTranslationChange(triggerUpdate);\n   */\n  static onTranslationChange(handler: () => void): () => void {\n    const i18nextEvents = ['initialized', 'loaded'] as const;\n    const storeEvents = ['removed', 'added'] as const;\n\n    i18nextEvents.forEach(type => I18n.i18next.on(type, handler));\n    storeEvents.forEach(type => I18n.i18next.store.on(type, handler));\n\n    return () => {\n      i18nextEvents.forEach(type => I18n.i18next.off(type, handler));\n      storeEvents.forEach(type => I18n.i18next.store.off(type, handler));\n    };\n  }\n\n  /**\n   * Registers a global event listener that calls `handler` every time an i18next resource\n   * is downloaded by `foxy-i18n`. Allows devs to specify resource location and/or fetch it\n   * via a different channel (e.g. web sockets or using a localization SaaS).\n   *\n   * @param handler Callback to invoke on resource fetch.\n   * @example const unsubscribe = I18n.onResourceFetch((ns, lang) => fetch(`path/to/${ns}/${lang}`));\n   */\n  static onResourceFetch(handler: (ns: string, lang: string) => Promise<Response>): () => void {\n    const handleFetch = (evt: unknown) => {\n      if (evt instanceof FetchEvent && evt.request.url.startsWith('foxy://i18n/')) {\n        const [lang, ns] = evt.request.url.split('/').reverse();\n        evt.respondWith(handler(ns, lang));\n      }\n    };\n\n    addEventListener('fetch', handleFetch);\n    return () => removeEventListener('fetch', handleFetch);\n  }\n\n  /**\n   * Adds payment gateway names to the i18next store. Fetch `fx:hosted_payment_gateways`\n   * and `fx:payment_gateways` and call this method to make gateway names available to\n   * elements like `foxy-payment-card`.\n   *\n   * @param param0 `fx:hosted_payment_gateways` or `fx:payment_gateways`\n   * @example I18n.setGateways({ values: { authorize: { name: 'Authorize.Net' }}})\n   */\n  static setGateways({ values }: Gateways): void {\n    for (const id in values) {\n      this.i18next.addResource('en', 'gateways', `gateways.${id}`, values[id].name);\n    }\n  }\n\n  /** @readonly */\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      options: { type: Object },\n      key: { type: String },\n    };\n  }\n\n  /**\n   * Optional i18next translation function\n   * [options](https://www.i18next.com/translation-function/essentials#overview-options).\n   */\n  options: TOptions<StringMap> = {};\n\n  /**\n   * Optional key to translate. Empty by default (renders nothing).\n   * See [i18next docs](https://www.i18next.com/translation-function/essentials#accessing-keys) for more info.\n   */\n  key = '';\n\n  private __unsubscribe?: () => void;\n\n  /** @readonly */\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.__unsubscribe = I18n.onTranslationChange(() => this.requestUpdate());\n  }\n\n  /** @readonly */\n  render(): TemplateResult {\n    return html`<span>${this.t(this.key, { ...this.options, lng: this.lang })}</span>`;\n  }\n\n  /** @readonly */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.__unsubscribe?.();\n  }\n}\n\nI18n.i18next.init({\n  interpolation: { format, escapeValue: false },\n  fallbackLng: 'en',\n  fallbackNS: 'shared',\n  defaultNS: 'shared',\n  ns: ['shared'],\n});\n"]}

package/dist/elements/public/ItemsForm/private/Picture.d.ts

@@ -1,6 +1,7 @@
 import { CSSResultArray, LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';
 import { PreviewItem } from './Preview';
 export declare class Picture extends LitElement {
+    static readonly placeholder = "data:image/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Crect width=\"40\" height=\"40\" fill=\"%23E8E8E8\"/%3E%3Cpath d=\"M31.5143 0H24.5476L0 24.5476V31.5143L11.7046 19.8097L11.9841 17.0782C12.0983 15.9624 13.0131 15.1154 14.1038 15.1154H15.7373V12.1923C15.7373 10.9815 16.6915 10 17.8687 10H21.5143L31.5143 0Z\" fill=\"white\"/%3E%3Cpath d=\"M11.5434 21.3852L0 32.9285V39.8953L11.5822 28.3131C11.172 27.8663 10.9438 27.2444 11.012 26.5782L11.5434 21.3852Z\" fill=\"white\"/%3E%3Cpath d=\"M12.4305 28.879L1.30951 40H8.27631L19.2763 29H13.1316C12.8853 29 12.6495 28.9573 12.4305 28.879Z\" fill=\"white\"/%3E%3Cpath d=\"M28.3113 19.965L28.0159 17.0782C27.9116 16.0591 27.1395 15.2642 26.1754 15.1341L40 1.3095V8.27627L28.3113 19.965Z\" fill=\"white\"/%3E%3Cpath d=\"M20.6905 29L9.69049 40H16.6572L27.9755 28.6817C27.6541 28.8832 27.2756 29 26.8684 29H20.6905Z\" fill=\"white\"/%3E%3Cpath d=\"M28.6572 28C28.9128 27.5952 29.0415 27.1003 28.988 26.5782L28.4426 21.2479L40 9.69053V16.6572L28.6572 28Z\" fill=\"white\"/%3E%3Cpath d=\"M25.0381 40H18.0715L40 18.0715V25.0381L25.0381 40Z\" fill=\"white\"/%3E%3Cpath d=\"M26.4524 40H33.4191L40 33.4191V26.4524L26.4524 40Z\" fill=\"white\"/%3E%3Cpath d=\"M40 40H34.8333L40 34.8333V40Z\" fill=\"white\"/%3E%3Cpath d=\"M16.1666 0H23.1334L0 23.1334V16.1666L16.1666 0Z\" fill=\"white\"/%3E%3Cpath d=\"M14.7524 0H7.78571L0 7.78573V14.7524L14.7524 0Z\" fill=\"white\"/%3E%3Cpath d=\"M0 0H6.37152L0 6.37151V0Z\" fill=\"white\"/%3E%3Cpath d=\"M21.467 11.4615H17.8687C17.4763 11.4615 17.1582 11.7887 17.1582 12.1923V15.1154H22.8418V12.1923C22.8418 11.7887 22.5237 11.4615 22.1313 11.4615H21.467Z\" fill=\"white\"/%3E%3Cpath d=\"M24.7798 15.1154H24.2627V12.1923C24.2627 11.227 23.6562 10.4075 22.8138 10.1148L32.9286 0H39.89L24.7798 15.1154Z\" fill=\"white\"/%3E%3C/svg%3E";
     static get properties(): PropertyDeclarations;
     static get styles(): CSSResultArray;
     quantity: number;

package/dist/elements/public/ItemsForm/private/Picture.js

@@ -141,6 +141,7 @@ export class Picture extends LitElement {
         const image = new Image();
         image.src = this.image;
         image.setAttribute('part', 'picture');
+        image.addEventListener('error', () => (image.src = Picture.placeholder));
         this.__setImageState(image, state);
         this.__container.insertBefore(image, refChild);
         return image;
@@ -158,4 +159,5 @@ export class Picture extends LitElement {
         image.className = [shared, states[state]].join(' ');
     }
 }
+Picture.placeholder = 'data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="40" height="40" fill="%23E8E8E8"/%3E%3Cpath d="M31.5143 0H24.5476L0 24.5476V31.5143L11.7046 19.8097L11.9841 17.0782C12.0983 15.9624 13.0131 15.1154 14.1038 15.1154H15.7373V12.1923C15.7373 10.9815 16.6915 10 17.8687 10H21.5143L31.5143 0Z" fill="white"/%3E%3Cpath d="M11.5434 21.3852L0 32.9285V39.8953L11.5822 28.3131C11.172 27.8663 10.9438 27.2444 11.012 26.5782L11.5434 21.3852Z" fill="white"/%3E%3Cpath d="M12.4305 28.879L1.30951 40H8.27631L19.2763 29H13.1316C12.8853 29 12.6495 28.9573 12.4305 28.879Z" fill="white"/%3E%3Cpath d="M28.3113 19.965L28.0159 17.0782C27.9116 16.0591 27.1395 15.2642 26.1754 15.1341L40 1.3095V8.27627L28.3113 19.965Z" fill="white"/%3E%3Cpath d="M20.6905 29L9.69049 40H16.6572L27.9755 28.6817C27.6541 28.8832 27.2756 29 26.8684 29H20.6905Z" fill="white"/%3E%3Cpath d="M28.6572 28C28.9128 27.5952 29.0415 27.1003 28.988 26.5782L28.4426 21.2479L40 9.69053V16.6572L28.6572 28Z" fill="white"/%3E%3Cpath d="M25.0381 40H18.0715L40 18.0715V25.0381L25.0381 40Z" fill="white"/%3E%3Cpath d="M26.4524 40H33.4191L40 33.4191V26.4524L26.4524 40Z" fill="white"/%3E%3Cpath d="M40 40H34.8333L40 34.8333V40Z" fill="white"/%3E%3Cpath d="M16.1666 0H23.1334L0 23.1334V16.1666L16.1666 0Z" fill="white"/%3E%3Cpath d="M14.7524 0H7.78571L0 7.78573V14.7524L14.7524 0Z" fill="white"/%3E%3Cpath d="M0 0H6.37152L0 6.37151V0Z" fill="white"/%3E%3Cpath d="M21.467 11.4615H17.8687C17.4763 11.4615 17.1582 11.7887 17.1582 12.1923V15.1154H22.8418V12.1923C22.8418 11.7887 22.5237 11.4615 22.1313 11.4615H21.467Z" fill="white"/%3E%3Cpath d="M24.7798 15.1154H24.2627V12.1923C24.2627 11.227 23.6562 10.4075 22.8138 10.1148L32.9286 0H39.89L24.7798 15.1154Z" fill="white"/%3E%3C/svg%3E';
 //# sourceMappingURL=Picture.js.map

package/dist/elements/public/ItemsForm/private/Picture.js.map

@@ -1 +1 @@
-{"version":3,"file":"Picture.js","sourceRoot":"","sources":["../../../../../src/elements/public/ItemsForm/private/Picture.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  CSSResultArray,\n  LitElement,\n  PropertyDeclarations,\n  TemplateResult,\n  css,\n  html,\n} from 'lit-element';\n\nimport { PreviewItem } from './Preview';\nimport { Themeable } from '../../../../mixins/themeable';\n\nenum ImageState {\n  Excluded = 0,\n  BeforeEnter = 1,\n  Default = 2,\n  Previous = 3,\n  BeforeExit = 4,\n}\n\nexport class Picture extends LitElement {\n  public static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      quantity: { attribute: false },\n      image: { attribute: false },\n    };\n  }\n\n  public static get styles(): CSSResultArray {\n    return [\n      Themeable.styles,\n      css`\n        .ease-out-back {\n          transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n\n        .blur-1 {\n          filter: blur(1px);\n        }\n\n        .blur-2 {\n          filter: blur(2px);\n        }\n\n        .grayscale {\n          filter: grayscale();\n        }\n\n        .rotate-12 {\n          --tw-rotate: 12deg;\n        }\n\n        .-rotate-12 {\n          --tw-rotate: -12deg;\n        }\n\n        .-rotate-24 {\n          --tw-rotate: -24deg;\n        }\n\n        .translate-y-half {\n          --tw-translate-y: 50%;\n        }\n      `,\n    ];\n  }\n\n  public quantity = 0;\n\n  public image = '';\n\n  public set empty(newValue: boolean) {\n    this.updateComplete.then(() => {\n      if (newValue) {\n        const [, ...bottomImages] = this.__stack;\n        bottomImages.forEach(image => image.remove());\n      } else if (this.quantity > 1 && this.__stack.length < 2) {\n        this.__insertImage(ImageState.Previous, this.__stack[0]);\n      }\n    });\n  }\n\n  public set data({ quantity, image }: PreviewItem) {\n    this.quantity = quantity;\n    this.image = image;\n  }\n\n  public render(): TemplateResult {\n    return html`<div id=\"image\" class=\"w-full h-full relative\"></div>`;\n  }\n\n  public firstUpdated(): void {\n    const top = this.__insertImage(ImageState.Default);\n    if (this.quantity > 1) this.__insertImage(ImageState.Previous, top);\n  }\n\n  public updated(changedProperties: Map<keyof Picture, unknown>): void {\n    if (changedProperties.has('quantity')) {\n      const oldValue = changedProperties.get('quantity') as number | undefined;\n      if (oldValue !== undefined) this.quantity > oldValue ? this.__add() : this.__remove();\n    }\n\n    if (changedProperties.has('image')) {\n      this.__stack.forEach(image => (image.src = this.image));\n    }\n  }\n\n  private get __container() {\n    return this.shadowRoot!.getElementById('image')!;\n  }\n\n  private get __stack() {\n    const list = this.__container?.querySelectorAll(':not(.opacity-0)') ?? [];\n    return [...list].reverse() as HTMLImageElement[];\n  }\n\n  private __add() {\n    const [current, previous] = this.__stack;\n\n    if (this.quantity > 1) {\n      if (current) this.__setImageState(current, ImageState.Previous);\n\n      if (previous) {\n        this.__setImageState(previous, ImageState.BeforeExit);\n        previous.ontransitionend = /* istanbul ignore next */ () => previous.remove();\n      }\n\n      this.__setImageState(this.__insertImage(ImageState.BeforeEnter), ImageState.Default);\n    } else {\n      if (current) this.__setImageState(current, ImageState.Default);\n    }\n  }\n\n  private __remove() {\n    const [current, previous] = this.__stack;\n    let imageToRemove: HTMLImageElement;\n\n    if (this.quantity > 0) {\n      if (previous) this.__setImageState(previous, ImageState.Default);\n      imageToRemove = current;\n    } else {\n      if (current) this.__setImageState(current, ImageState.Excluded);\n      imageToRemove = previous;\n    }\n\n    if (imageToRemove) {\n      this.__setImageState(imageToRemove, ImageState.BeforeEnter);\n      imageToRemove.ontransitionend = /* istanbul ignore next */ () => imageToRemove!.remove();\n    }\n\n    if (this.quantity > 1) {\n      const last = this.__insertImage(ImageState.BeforeExit, this.__container.firstElementChild);\n      this.__setImageState(last, ImageState.Previous);\n    }\n  }\n\n  private __insertImage(state: ImageState, refChild: Node | null = null) {\n    const image = new Image();\n    image.src = this.image;\n    image.setAttribute('part', 'picture');\n    this.__setImageState(image, state);\n    this.__container.insertBefore(image, refChild);\n    return image;\n  }\n\n  private __setImageState(image: HTMLImageElement, state: ImageState) {\n    const shared =\n      'absolute inset-0 w-full h-full object-cover rounded transform transition duration-700 ease-out-back';\n\n    const states = [\n      'grayscale',\n      'shadow-m translate-y-half scale-110 rotate-12 opacity-0',\n      'shadow-m',\n      'blur-1 -rotate-12 opacity-25',\n      'blur-2 -rotate-24 opacity-0',\n    ];\n\n    void image.offsetHeight; // reflow\n    image.className = [shared, states[state]].join(' ');\n  }\n}\n"]}
+{"version":3,"file":"Picture.js","sourceRoot":"","sources":["../../../../../src/elements/public/ItemsForm/private/Picture.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  CSSResultArray,\n  LitElement,\n  PropertyDeclarations,\n  TemplateResult,\n  css,\n  html,\n} from 'lit-element';\n\nimport { PreviewItem } from './Preview';\nimport { Themeable } from '../../../../mixins/themeable';\n\nenum ImageState {\n  Excluded = 0,\n  BeforeEnter = 1,\n  Default = 2,\n  Previous = 3,\n  BeforeExit = 4,\n}\n\nexport class Picture extends LitElement {\n  public static readonly placeholder =\n    'data:image/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Crect width=\"40\" height=\"40\" fill=\"%23E8E8E8\"/%3E%3Cpath d=\"M31.5143 0H24.5476L0 24.5476V31.5143L11.7046 19.8097L11.9841 17.0782C12.0983 15.9624 13.0131 15.1154 14.1038 15.1154H15.7373V12.1923C15.7373 10.9815 16.6915 10 17.8687 10H21.5143L31.5143 0Z\" fill=\"white\"/%3E%3Cpath d=\"M11.5434 21.3852L0 32.9285V39.8953L11.5822 28.3131C11.172 27.8663 10.9438 27.2444 11.012 26.5782L11.5434 21.3852Z\" fill=\"white\"/%3E%3Cpath d=\"M12.4305 28.879L1.30951 40H8.27631L19.2763 29H13.1316C12.8853 29 12.6495 28.9573 12.4305 28.879Z\" fill=\"white\"/%3E%3Cpath d=\"M28.3113 19.965L28.0159 17.0782C27.9116 16.0591 27.1395 15.2642 26.1754 15.1341L40 1.3095V8.27627L28.3113 19.965Z\" fill=\"white\"/%3E%3Cpath d=\"M20.6905 29L9.69049 40H16.6572L27.9755 28.6817C27.6541 28.8832 27.2756 29 26.8684 29H20.6905Z\" fill=\"white\"/%3E%3Cpath d=\"M28.6572 28C28.9128 27.5952 29.0415 27.1003 28.988 26.5782L28.4426 21.2479L40 9.69053V16.6572L28.6572 28Z\" fill=\"white\"/%3E%3Cpath d=\"M25.0381 40H18.0715L40 18.0715V25.0381L25.0381 40Z\" fill=\"white\"/%3E%3Cpath d=\"M26.4524 40H33.4191L40 33.4191V26.4524L26.4524 40Z\" fill=\"white\"/%3E%3Cpath d=\"M40 40H34.8333L40 34.8333V40Z\" fill=\"white\"/%3E%3Cpath d=\"M16.1666 0H23.1334L0 23.1334V16.1666L16.1666 0Z\" fill=\"white\"/%3E%3Cpath d=\"M14.7524 0H7.78571L0 7.78573V14.7524L14.7524 0Z\" fill=\"white\"/%3E%3Cpath d=\"M0 0H6.37152L0 6.37151V0Z\" fill=\"white\"/%3E%3Cpath d=\"M21.467 11.4615H17.8687C17.4763 11.4615 17.1582 11.7887 17.1582 12.1923V15.1154H22.8418V12.1923C22.8418 11.7887 22.5237 11.4615 22.1313 11.4615H21.467Z\" fill=\"white\"/%3E%3Cpath d=\"M24.7798 15.1154H24.2627V12.1923C24.2627 11.227 23.6562 10.4075 22.8138 10.1148L32.9286 0H39.89L24.7798 15.1154Z\" fill=\"white\"/%3E%3C/svg%3E';\n\n  public static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      quantity: { attribute: false },\n      image: { attribute: false },\n    };\n  }\n\n  public static get styles(): CSSResultArray {\n    return [\n      Themeable.styles,\n      css`\n        .ease-out-back {\n          transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n\n        .blur-1 {\n          filter: blur(1px);\n        }\n\n        .blur-2 {\n          filter: blur(2px);\n        }\n\n        .grayscale {\n          filter: grayscale();\n        }\n\n        .rotate-12 {\n          --tw-rotate: 12deg;\n        }\n\n        .-rotate-12 {\n          --tw-rotate: -12deg;\n        }\n\n        .-rotate-24 {\n          --tw-rotate: -24deg;\n        }\n\n        .translate-y-half {\n          --tw-translate-y: 50%;\n        }\n      `,\n    ];\n  }\n\n  public quantity = 0;\n\n  public image = '';\n\n  public set empty(newValue: boolean) {\n    this.updateComplete.then(() => {\n      if (newValue) {\n        const [, ...bottomImages] = this.__stack;\n        bottomImages.forEach(image => image.remove());\n      } else if (this.quantity > 1 && this.__stack.length < 2) {\n        this.__insertImage(ImageState.Previous, this.__stack[0]);\n      }\n    });\n  }\n\n  public set data({ quantity, image }: PreviewItem) {\n    this.quantity = quantity;\n    this.image = image;\n  }\n\n  public render(): TemplateResult {\n    return html`<div id=\"image\" class=\"w-full h-full relative\"></div>`;\n  }\n\n  public firstUpdated(): void {\n    const top = this.__insertImage(ImageState.Default);\n    if (this.quantity > 1) this.__insertImage(ImageState.Previous, top);\n  }\n\n  public updated(changedProperties: Map<keyof Picture, unknown>): void {\n    if (changedProperties.has('quantity')) {\n      const oldValue = changedProperties.get('quantity') as number | undefined;\n      if (oldValue !== undefined) this.quantity > oldValue ? this.__add() : this.__remove();\n    }\n\n    if (changedProperties.has('image')) {\n      this.__stack.forEach(image => (image.src = this.image));\n    }\n  }\n\n  private get __container() {\n    return this.shadowRoot!.getElementById('image')!;\n  }\n\n  private get __stack() {\n    const list = this.__container?.querySelectorAll(':not(.opacity-0)') ?? [];\n    return [...list].reverse() as HTMLImageElement[];\n  }\n\n  private __add() {\n    const [current, previous] = this.__stack;\n\n    if (this.quantity > 1) {\n      if (current) this.__setImageState(current, ImageState.Previous);\n\n      if (previous) {\n        this.__setImageState(previous, ImageState.BeforeExit);\n        previous.ontransitionend = /* istanbul ignore next */ () => previous.remove();\n      }\n\n      this.__setImageState(this.__insertImage(ImageState.BeforeEnter), ImageState.Default);\n    } else {\n      if (current) this.__setImageState(current, ImageState.Default);\n    }\n  }\n\n  private __remove() {\n    const [current, previous] = this.__stack;\n    let imageToRemove: HTMLImageElement;\n\n    if (this.quantity > 0) {\n      if (previous) this.__setImageState(previous, ImageState.Default);\n      imageToRemove = current;\n    } else {\n      if (current) this.__setImageState(current, ImageState.Excluded);\n      imageToRemove = previous;\n    }\n\n    if (imageToRemove) {\n      this.__setImageState(imageToRemove, ImageState.BeforeEnter);\n      imageToRemove.ontransitionend = /* istanbul ignore next */ () => imageToRemove!.remove();\n    }\n\n    if (this.quantity > 1) {\n      const last = this.__insertImage(ImageState.BeforeExit, this.__container.firstElementChild);\n      this.__setImageState(last, ImageState.Previous);\n    }\n  }\n\n  private __insertImage(state: ImageState, refChild: Node | null = null) {\n    const image = new Image();\n\n    image.src = this.image;\n    image.setAttribute('part', 'picture');\n    image.addEventListener('error', () => (image.src = Picture.placeholder));\n\n    this.__setImageState(image, state);\n    this.__container.insertBefore(image, refChild);\n    return image;\n  }\n\n  private __setImageState(image: HTMLImageElement, state: ImageState) {\n    const shared =\n      'absolute inset-0 w-full h-full object-cover rounded transform transition duration-700 ease-out-back';\n\n    const states = [\n      'grayscale',\n      'shadow-m translate-y-half scale-110 rotate-12 opacity-0',\n      'shadow-m',\n      'blur-1 -rotate-12 opacity-25',\n      'blur-2 -rotate-24 opacity-0',\n    ];\n\n    void image.offsetHeight; // reflow\n    image.className = [shared, states[state]].join(' ');\n  }\n}\n"]}

package/dist/elements/public/SubscriptionForm/SubscriptionForm.js

@@ -466,20 +466,28 @@ export class SubscriptionForm extends Base {
     get __isNextTransactionDateVisible() {
         if (this.hiddenSelector.matches('next-transaction-date', true))
             return false;
-        if (this.settings === null)
-            return true;
         if (this.data === null)
             return false;
+        if (this.data.end_date && new Date(this.data.end_date).getTime() <= Date.now())
+            return false;
+        if (this.data.is_active === false)
+            return false;
+        if (this.settings === null)
+            return true;
         const rules = this.settings.subscriptions.allow_next_date_modification;
         return !!getNextTransactionDateConstraints(this.data, rules);
     }
     get __isFrequencyVisible() {
         if (this.hiddenSelector.matches('frequency', true))
             return false;
-        if (this.settings === null)
-            return true;
         if (this.data === null)
             return false;
+        if (this.data.end_date && new Date(this.data.end_date).getTime() <= Date.now())
+            return false;
+        if (this.data.is_active === false)
+            return false;
+        if (this.settings === null)
+            return true;
         const allowedFrequencies = getAllowedFrequencies({
             subscription: this.data,
             settings: this.settings,

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

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionForm.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionForm/SubscriptionForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Choice, Group, Skeleton } from '../../private/index';\nimport { Data, Item, Settings, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\nimport {\n  getAllowedFrequencies,\n  getNextTransactionDateConstraints,\n  isNextTransactionDate,\n} from '@foxy.io/sdk/customer';\n\nimport { ButtonElement } from '@vaadin/vaadin-button';\nimport { CellContext } from '../Table/types';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { FormDialog } from '../FormDialog';\nimport { InternalCalendar } from '../../internal/InternalCalendar';\nimport { NucleonElement } from '../NucleonElement/index';\nimport { PageRendererContext } from '../CollectionPages/types';\nimport { Preview } from '../ItemsForm/private/Preview';\nimport { PropertyDeclarations } from 'lit-element';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TransactionsTable } from '../TransactionsTable/TransactionsTable';\nimport { Data as TransactionsTableData } from '../TransactionsTable/types';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { parseFrequency } from '../../../utils/parse-frequency';\nimport { serializeDate } from '../../../utils/serialize-date';\n\nconst NS = 'subscription-form';\nconst Base = ScopedElementsMixin(\n  ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Form element for creating or editing subscriptions.\n *\n * @slot header:before - **new in v1.4.0**\n * @slot header:after - **new in v1.4.0**\n *\n * @slot items:before - **new in v1.4.0**\n * @slot items:after - **new in v1.4.0**\n * @slot items:actions:before - **new in v1.4.0**\n * @slot items:actions:after - **new in v1.4.0**\n *\n * @slot end-date:before - **new in v1.4.0**\n * @slot end-date:after - **new in v1.4.0**\n *\n * @slot next-transaction-date:before - **new in v1.4.0**\n * @slot next-transaction-date:after - **new in v1.4.0**\n *\n * @slot frequency:before - **new in v1.4.0**\n * @slot frequency:after - **new in v1.4.0**\n *\n * @slot transactions:before - **new in v1.4.0**\n * @slot transactions:after - **new in v1.4.0**\n *\n * @element foxy-subscription-form\n * @since 1.2.0\n */\nexport class SubscriptionForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-calendar': customElements.get('foxy-internal-calendar'),\n      'foxy-collection-pages': customElements.get('foxy-collection-pages'),\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'vaadin-combo-box': customElements.get('vaadin-combo-box'),\n      'foxy-form-dialog': customElements.get('foxy-form-dialog'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'vcf-tooltip': customElements.get('vcf-tooltip'),\n      'foxy-table': customElements.get('foxy-table'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'iron-icon': customElements.get('iron-icon'),\n      'x-skeleton': Skeleton,\n      'x-preview': Preview,\n      'x-choice': Choice,\n      'x-group': Group,\n    };\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      settings: { type: Object },\n    };\n  }\n\n  settings: Settings | null = null;\n\n  templates: Templates = {};\n\n  private readonly __renderHeaderSubtitle = () => {\n    const { data, lang, ns } = this;\n\n    if (data) {\n      let color = 'text-secondary';\n      let date: string;\n      let key: string;\n\n      if (data.first_failed_transaction_date) {\n        color = 'text-error';\n        date = data.first_failed_transaction_date;\n        key = 'subscription_failed';\n      } else if (data.end_date) {\n        date = data.end_date;\n        const hasEnded = new Date(date).getTime() > Date.now();\n        key = hasEnded ? 'subscription_will_be_cancelled' : 'subscription_cancelled';\n      } else {\n        date = data.next_transaction_date ?? new Date().toISOString();\n        key = `subscription_${data.is_active ? 'active' : 'inactive'}`;\n      }\n\n      const text = html`\n        <foxy-i18n\n          data-testid=\"header-subtitle\"\n          options=${JSON.stringify({ date })}\n          class=${color}\n          lang=${lang}\n          key=${key}\n          ns=${ns}\n        >\n        </foxy-i18n>\n      `;\n\n      if (data.first_failed_transaction_date) {\n        return html`\n          <span id=\"status\" class=\"flex items-center space-x-xs ${color}\">\n            ${text}<iron-icon icon=\"icons:info-outline\" class=\"icon-inline\"></iron-icon>\n          </span>\n          <vcf-tooltip for=\"status\" position=\"bottom\">\n            <span class=\"text-s\">${data.error_message}</span>\n          </vcf-tooltip>\n        `;\n      }\n\n      return text;\n    }\n\n    return html`<x-skeleton class=\"w-full\" variant=\"static\">&nbsp;</x-skeleton>`;\n  };\n\n  private readonly __renderHeaderTitle = () => {\n    const { data, lang, ns } = this;\n\n    if (data) {\n      const frequency = parseFrequency(data.frequency);\n      const currency = data._embedded['fx:last_transaction'].currency_code;\n      const total = data._embedded['fx:last_transaction'].total_order;\n\n      return html`\n        <foxy-i18n\n          data-testid=\"header-title\"\n          options=${JSON.stringify({ ...frequency, amount: `${total} ${currency}` })}\n          lang=${lang}\n          key=\"price_${data.frequency === '.5m' ? 'twice_a_month' : 'recurring'}\"\n          ns=${ns}\n        >\n        </foxy-i18n>\n      `;\n    }\n\n    return html`<x-skeleton class=\"w-full\" variant=\"static\">&nbsp;</x-skeleton>`;\n  };\n\n  private readonly __renderHeader = () => {\n    return html`\n      <div data-testid=\"header\">\n        ${this.renderTemplateOrSlot('header:before')}\n        <div class=\"leading-xs text-xxl font-bold\">${this.__renderHeaderTitle()}</div>\n        <div class=\"leading-xs text-l\">${this.__renderHeaderSubtitle()}</div>\n        ${this.renderTemplateOrSlot('header:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderItemsActions = () => {\n    return html`\n      <div class=\"flex\" data-testid=\"items:actions\">\n        ${this.renderTemplateOrSlot('items:actions:before')}\n\n        <foxy-i18n\n          data-testid=\"items:actions-label\"\n          class=\"flex-1\"\n          lang=${this.lang}\n          key=\"item_plural\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        ${this.renderTemplateOrSlot('items:actions:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderItemsItem = (item: Item) => {\n    const price = item.price.toLocaleString(this.lang || 'en', {\n      style: 'currency',\n      currency: this.data!._embedded['fx:last_transaction'].currency_code,\n    });\n\n    let quantity: TemplateResult;\n\n    if (item.quantity > 1) {\n      quantity = html`\n        <div\n          data-testclass=\"item-quantity\"\n          class=\"px-s h-xs rounded bg-contrast-5 flex items-center font-tnum text-contrast text-s font-bold\"\n        >\n          ${item.quantity}\n        </div>\n      `;\n    } else {\n      quantity = html``;\n    }\n\n    return html`\n      <figure class=\"flex items-center space-x-m py-s pr-m\" data-testclass=\"item\">\n        <x-preview\n          data-testclass=\"item-preview\"\n          class=\"w-l h-l\"\n          .quantity=${item.quantity}\n          .image=${item.image}\n        >\n        </x-preview>\n\n        <figcaption class=\"leading-s flex-1 flex justify-between items-center\">\n          <div class=\"flex flex-col\">\n            <span class=\"font-medium\" data-testclass=\"item-name\">${item.name}</span>\n            <span class=\"text-secondary text-s\" data-testclass=\"item-price\">${price}</span>\n          </div>\n\n          ${quantity}\n        </figcaption>\n      </figure>\n    `;\n  };\n\n  private readonly __renderItems = () => {\n    const hiddenSelector = this.hiddenSelector;\n    const items = this.data?._embedded['fx:transaction_template']._embedded['fx:items'] ?? [];\n    const label = hiddenSelector.matches('items:actions', true) ? '' : this.__renderItemsActions();\n\n    return html`\n      <div data-testid=\"items\">\n        ${this.renderTemplateOrSlot('items:before')}\n        <x-group frame>\n          <div slot=\"header\">${label}</div>\n          <div class=\"divide-y divide-contrast-10 pl-s\">${items.map(this.__renderItemsItem)}</div>\n        </x-group>\n        ${this.renderTemplateOrSlot('items:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderEndDate = () => {\n    const { disabledSelector, lang, ns } = this;\n    const formHiddenSelector = this.hiddenSelector.zoom('end-date:form').toString();\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('end-date:before')}\n\n        <foxy-form-dialog\n          readonlycontrols=${this.readonlySelector.zoom('end-date:form').toString()}\n          disabledcontrols=${disabledSelector.zoom('end-date:form').toString()}\n          hiddencontrols=\"save-button ${formHiddenSelector}\"\n          data-testid=\"cancellation-form\"\n          parent=${this.parent}\n          header=\"end_subscription\"\n          alert\n          form=\"foxy-cancellation-form\"\n          href=${this.href}\n          lang=${lang}\n          id=\"end-date-form\"\n          ns=${ns}\n          .templates=${this.getNestedTemplates('end-date:form')}\n        >\n        </foxy-form-dialog>\n\n        <vaadin-button\n          data-testid=\"end-date\"\n          theme=\"error\"\n          class=\"w-full\"\n          ?disabled=${!this.data || disabledSelector.matches('end-date', true)}\n          @click=${(evt: Event) => {\n            const form = this.renderRoot.querySelector('#end-date-form') as FormDialog;\n            form.show(evt.currentTarget as ButtonElement);\n          }}\n        >\n          <foxy-i18n key=\"end_subscription\" ns=${ns} lang=${lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('end-date:after')}\n      </div>\n    `;\n  };\n\n  private readonly __checkNextTransactionDateAvailability = (date: Date) => {\n    const { settings, data: subscription } = this;\n\n    if (settings && subscription) {\n      const value = serializeDate(date);\n      return isNextTransactionDate({ value, settings, subscription });\n    }\n\n    return date.getTime() >= Date.now();\n  };\n\n  private readonly __renderNextTransactionDate = () => {\n    const { data, lang, ns } = this;\n    const isActive = !!data?.is_active;\n\n    return html`\n      <div data-testid=\"next-transaction-date\">\n        ${this.renderTemplateOrSlot('next-transaction-date:before')}\n\n        <x-group frame>\n          <foxy-i18n key=\"next_transaction_date\" ns=${ns} lang=${lang} slot=\"header\"></foxy-i18n>\n          <foxy-internal-calendar\n            start=${ifDefined(data?.next_transaction_date.substr(0, 10))}\n            value=${ifDefined(data?.next_transaction_date)}\n            lang=${lang}\n            ?readonly=${!isActive || this.readonlySelector.matches('next-transaction-date', true)}\n            ?disabled=${!data || this.disabledSelector.matches('next-transaction-date', true)}\n            .checkAvailability=${this.__checkNextTransactionDateAvailability}\n            @change=${(evt: Event) => {\n              const target = evt.target as InternalCalendar;\n              this.edit({ next_transaction_date: target.value });\n            }}\n          >\n          </foxy-internal-calendar>\n        </x-group>\n\n        ${this.renderTemplateOrSlot('next-transaction-date:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderFrequencyAsDropdown = () => {\n    const { data } = this;\n    const active = !!data?.is_active;\n    const items = this.__frequencies.map(v => ({\n      label: this.t(v === '.5m' ? 'twice_a_month' : 'frequency', parseFrequency(v)),\n      value: v,\n    }));\n\n    return html`\n      <vaadin-combo-box\n        item-value-path=\"value\"\n        item-label-path=\"label\"\n        data-testid=\"frequency\"\n        ?disabled=${!data || this.disabledSelector.matches('frequency', true)}\n        ?readonly=${data && (!active || this.readonlySelector.matches('frequency', true))}\n        class=\"w-full\"\n        label=${this.t('frequency_label').toString()}\n        value=${ifDefined(this.form.frequency)}\n        .items=${items}\n        @change=${(evt: Event) => {\n          this.edit({ frequency: (evt.target as HTMLInputElement).value });\n        }}\n      >\n      </vaadin-combo-box>\n    `;\n  };\n\n  private readonly __renderFrequencyAsRadioList = () => {\n    const { data, lang, ns } = this;\n\n    return html`\n      <x-group frame>\n        <foxy-i18n key=\"frequency_label\" ns=${ns} lang=${lang} slot=\"header\"></foxy-i18n>\n\n        <x-choice\n          default-custom-value=\"1d\"\n          data-testid=\"frequency\"\n          type=\"frequency\"\n          ns=${SubscriptionForm.defaultNS}\n          ?custom=${this.settings === null}\n          .items=${this.__frequencies}\n          .value=${this.form.frequency ?? null}\n          ?disabled=${!data || this.disabledSelector.matches('frequency', true)}\n          ?readonly=${data && (!data.is_active || this.readonlySelector.matches('frequency', true))}\n          @change=${(evt: Event) => {\n            this.edit({ frequency: (evt.target as HTMLInputElement).value });\n          }}\n        >\n          ${this.__frequencies.map(\n            frequency => html`\n              <foxy-i18n\n                options=${JSON.stringify(parseFrequency(frequency))}\n                slot=\"${frequency}-label\"\n                lang=${lang}\n                key=${frequency === '.5m' ? 'twice_a_month' : 'frequency'}\n                ns=${ns}\n              >\n              </foxy-i18n>\n            `\n          )}\n        </x-choice>\n      </x-group>\n    `;\n  };\n\n  private readonly __renderFrequency = () => {\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('frequency:before')}\n        ${this.settings && this.__frequencies.length > 4\n          ? this.__renderFrequencyAsDropdown()\n          : this.__renderFrequencyAsRadioList()}\n        ${this.renderTemplateOrSlot('frequency:after')}\n      </div>\n    `;\n  };\n\n  private readonly __transactionsTableColumns = [\n    {\n      cell(ctx: CellContext<TransactionsTableData>) {\n        const colors: Record<string, string> = {\n          declined: 'text-error',\n          rejected: 'text-error',\n        };\n\n        const status = TransactionsTable.statusColumn.cell!(ctx);\n        const price = TransactionsTable.priceColumn.cell!(ctx);\n        const color = colors[ctx.data.status] ?? 'text-body';\n\n        return ctx.html`\n          <span class=\"sr-only\">${status}</span>\n          <span class=\"${color} text-s\">${price}</span>\n        `;\n      },\n    },\n    { cell: TransactionsTable.idColumn.cell, hideBelow: 'sm' },\n    { cell: TransactionsTable.dateColumn.cell },\n    { cell: TransactionsTable.receiptColumn.cell },\n  ];\n\n  private readonly __renderTransactionsPage = ({ html, ...ctx }: PageRendererContext) => {\n    return html`\n      <foxy-table\n        group=${ctx.group}\n        lang=${ctx.lang}\n        href=${ctx.href}\n        ns=\"${ctx.ns} ${customElements.get('foxy-transactions-table')?.defaultNS ?? ''}\"\n        .columns=${this.__transactionsTableColumns}\n      >\n      </foxy-table>\n    `;\n  };\n\n  private readonly __renderTransactions = () => {\n    const { lang, ns } = this;\n\n    return html`\n      <div data-testid=\"transactions\">\n        ${this.renderTemplateOrSlot('transactions:before')}\n\n        <x-group frame>\n          <foxy-i18n lang=${lang} slot=\"header\" key=\"transaction_plural\" ns=${ns}></foxy-i18n>\n          <foxy-collection-pages\n            group=${this.group}\n            class=\"block divide-y divide-contrast-10 px-m\"\n            first=${this.data?._links['fx:transactions'].href ?? ''}\n            lang=${lang}\n            ns=${ns}\n            .page=${this.__renderTransactionsPage}\n          >\n          </foxy-collection-pages>\n        </x-group>\n\n        ${this.renderTemplateOrSlot('transactions:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n\n    return html`\n      <div\n        data-testid=\"wrapper\"\n        aria-busy=${isBusy}\n        aria-live=\"polite\"\n        class=\"relative space-y-l text-body font-lumo text-m leading-m\"\n      >\n        ${this.hiddenSelector.matches('header', true) ? '' : this.__renderHeader()}\n        ${this.hiddenSelector.matches('items', true) ? '' : this.__renderItems()}\n        ${this.hiddenSelector.matches('end-date', true) ? '' : this.__renderEndDate()}\n        ${this.__isNextTransactionDateVisible ? this.__renderNextTransactionDate() : ''}\n        ${this.__isFrequencyVisible ? this.__renderFrequency() : ''}\n        ${this.hiddenSelector.matches('transactions', true) ? '' : this.__renderTransactions()}\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition duration-500 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private get __isNextTransactionDateVisible() {\n    if (this.hiddenSelector.matches('next-transaction-date', true)) return false;\n    if (this.settings === null) return true;\n    if (this.data === null) return false;\n\n    const rules = this.settings.subscriptions.allow_next_date_modification;\n    return !!getNextTransactionDateConstraints(this.data, rules);\n  }\n\n  private get __isFrequencyVisible() {\n    if (this.hiddenSelector.matches('frequency', true)) return false;\n    if (this.settings === null) return true;\n    if (this.data === null) return false;\n\n    const allowedFrequencies = getAllowedFrequencies({\n      subscription: this.data,\n      settings: this.settings,\n    });\n\n    return !allowedFrequencies.next().done;\n  }\n\n  private get __frequencies() {\n    if (!this.settings || !this.data) return ['.5m', '1m', '1y'];\n\n    const allowedFrequencies = getAllowedFrequencies({\n      subscription: this.data,\n      settings: this.settings,\n    });\n\n    return Array.from(allowedFrequencies);\n  }\n}\n"]}
+{"version":3,"file":"SubscriptionForm.js","sourceRoot":"","sources":["../../../../src/elements/public/SubscriptionForm/SubscriptionForm.ts"],"names":[],"mappings":"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","sourcesContent":["import { Choice, Group, Skeleton } from '../../private/index';\nimport { Data, Item, Settings, Templates } from './types';\nimport { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\nimport {\n  getAllowedFrequencies,\n  getNextTransactionDateConstraints,\n  isNextTransactionDate,\n} from '@foxy.io/sdk/customer';\n\nimport { ButtonElement } from '@vaadin/vaadin-button';\nimport { CellContext } from '../Table/types';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { FormDialog } from '../FormDialog';\nimport { InternalCalendar } from '../../internal/InternalCalendar';\nimport { NucleonElement } from '../NucleonElement/index';\nimport { PageRendererContext } from '../CollectionPages/types';\nimport { Preview } from '../ItemsForm/private/Preview';\nimport { PropertyDeclarations } from 'lit-element';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TransactionsTable } from '../TransactionsTable/TransactionsTable';\nimport { Data as TransactionsTableData } from '../TransactionsTable/types';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { parseFrequency } from '../../../utils/parse-frequency';\nimport { serializeDate } from '../../../utils/serialize-date';\n\nconst NS = 'subscription-form';\nconst Base = ScopedElementsMixin(\n  ThemeableMixin(ConfigurableMixin(TranslatableMixin(NucleonElement, NS)))\n);\n\n/**\n * Form element for creating or editing subscriptions.\n *\n * @slot header:before - **new in v1.4.0**\n * @slot header:after - **new in v1.4.0**\n *\n * @slot items:before - **new in v1.4.0**\n * @slot items:after - **new in v1.4.0**\n * @slot items:actions:before - **new in v1.4.0**\n * @slot items:actions:after - **new in v1.4.0**\n *\n * @slot end-date:before - **new in v1.4.0**\n * @slot end-date:after - **new in v1.4.0**\n *\n * @slot next-transaction-date:before - **new in v1.4.0**\n * @slot next-transaction-date:after - **new in v1.4.0**\n *\n * @slot frequency:before - **new in v1.4.0**\n * @slot frequency:after - **new in v1.4.0**\n *\n * @slot transactions:before - **new in v1.4.0**\n * @slot transactions:after - **new in v1.4.0**\n *\n * @element foxy-subscription-form\n * @since 1.2.0\n */\nexport class SubscriptionForm extends Base<Data> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'foxy-internal-calendar': customElements.get('foxy-internal-calendar'),\n      'foxy-collection-pages': customElements.get('foxy-collection-pages'),\n      'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),\n      'vaadin-combo-box': customElements.get('vaadin-combo-box'),\n      'foxy-form-dialog': customElements.get('foxy-form-dialog'),\n      'vaadin-button': customElements.get('vaadin-button'),\n      'foxy-spinner': customElements.get('foxy-spinner'),\n      'vcf-tooltip': customElements.get('vcf-tooltip'),\n      'foxy-table': customElements.get('foxy-table'),\n      'foxy-i18n': customElements.get('foxy-i18n'),\n      'iron-icon': customElements.get('iron-icon'),\n      'x-skeleton': Skeleton,\n      'x-preview': Preview,\n      'x-choice': Choice,\n      'x-group': Group,\n    };\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      settings: { type: Object },\n    };\n  }\n\n  settings: Settings | null = null;\n\n  templates: Templates = {};\n\n  private readonly __renderHeaderSubtitle = () => {\n    const { data, lang, ns } = this;\n\n    if (data) {\n      let color = 'text-secondary';\n      let date: string;\n      let key: string;\n\n      if (data.first_failed_transaction_date) {\n        color = 'text-error';\n        date = data.first_failed_transaction_date;\n        key = 'subscription_failed';\n      } else if (data.end_date) {\n        date = data.end_date;\n        const hasEnded = new Date(date).getTime() > Date.now();\n        key = hasEnded ? 'subscription_will_be_cancelled' : 'subscription_cancelled';\n      } else {\n        date = data.next_transaction_date ?? new Date().toISOString();\n        key = `subscription_${data.is_active ? 'active' : 'inactive'}`;\n      }\n\n      const text = html`\n        <foxy-i18n\n          data-testid=\"header-subtitle\"\n          options=${JSON.stringify({ date })}\n          class=${color}\n          lang=${lang}\n          key=${key}\n          ns=${ns}\n        >\n        </foxy-i18n>\n      `;\n\n      if (data.first_failed_transaction_date) {\n        return html`\n          <span id=\"status\" class=\"flex items-center space-x-xs ${color}\">\n            ${text}<iron-icon icon=\"icons:info-outline\" class=\"icon-inline\"></iron-icon>\n          </span>\n          <vcf-tooltip for=\"status\" position=\"bottom\">\n            <span class=\"text-s\">${data.error_message}</span>\n          </vcf-tooltip>\n        `;\n      }\n\n      return text;\n    }\n\n    return html`<x-skeleton class=\"w-full\" variant=\"static\">&nbsp;</x-skeleton>`;\n  };\n\n  private readonly __renderHeaderTitle = () => {\n    const { data, lang, ns } = this;\n\n    if (data) {\n      const frequency = parseFrequency(data.frequency);\n      const currency = data._embedded['fx:last_transaction'].currency_code;\n      const total = data._embedded['fx:last_transaction'].total_order;\n\n      return html`\n        <foxy-i18n\n          data-testid=\"header-title\"\n          options=${JSON.stringify({ ...frequency, amount: `${total} ${currency}` })}\n          lang=${lang}\n          key=\"price_${data.frequency === '.5m' ? 'twice_a_month' : 'recurring'}\"\n          ns=${ns}\n        >\n        </foxy-i18n>\n      `;\n    }\n\n    return html`<x-skeleton class=\"w-full\" variant=\"static\">&nbsp;</x-skeleton>`;\n  };\n\n  private readonly __renderHeader = () => {\n    return html`\n      <div data-testid=\"header\">\n        ${this.renderTemplateOrSlot('header:before')}\n        <div class=\"leading-xs text-xxl font-bold\">${this.__renderHeaderTitle()}</div>\n        <div class=\"leading-xs text-l\">${this.__renderHeaderSubtitle()}</div>\n        ${this.renderTemplateOrSlot('header:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderItemsActions = () => {\n    return html`\n      <div class=\"flex\" data-testid=\"items:actions\">\n        ${this.renderTemplateOrSlot('items:actions:before')}\n\n        <foxy-i18n\n          data-testid=\"items:actions-label\"\n          class=\"flex-1\"\n          lang=${this.lang}\n          key=\"item_plural\"\n          ns=${this.ns}\n        >\n        </foxy-i18n>\n\n        ${this.renderTemplateOrSlot('items:actions:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderItemsItem = (item: Item) => {\n    const price = item.price.toLocaleString(this.lang || 'en', {\n      style: 'currency',\n      currency: this.data!._embedded['fx:last_transaction'].currency_code,\n    });\n\n    let quantity: TemplateResult;\n\n    if (item.quantity > 1) {\n      quantity = html`\n        <div\n          data-testclass=\"item-quantity\"\n          class=\"px-s h-xs rounded bg-contrast-5 flex items-center font-tnum text-contrast text-s font-bold\"\n        >\n          ${item.quantity}\n        </div>\n      `;\n    } else {\n      quantity = html``;\n    }\n\n    return html`\n      <figure class=\"flex items-center space-x-m py-s pr-m\" data-testclass=\"item\">\n        <x-preview\n          data-testclass=\"item-preview\"\n          class=\"w-l h-l\"\n          .quantity=${item.quantity}\n          .image=${item.image}\n        >\n        </x-preview>\n\n        <figcaption class=\"leading-s flex-1 flex justify-between items-center\">\n          <div class=\"flex flex-col\">\n            <span class=\"font-medium\" data-testclass=\"item-name\">${item.name}</span>\n            <span class=\"text-secondary text-s\" data-testclass=\"item-price\">${price}</span>\n          </div>\n\n          ${quantity}\n        </figcaption>\n      </figure>\n    `;\n  };\n\n  private readonly __renderItems = () => {\n    const hiddenSelector = this.hiddenSelector;\n    const items = this.data?._embedded['fx:transaction_template']._embedded['fx:items'] ?? [];\n    const label = hiddenSelector.matches('items:actions', true) ? '' : this.__renderItemsActions();\n\n    return html`\n      <div data-testid=\"items\">\n        ${this.renderTemplateOrSlot('items:before')}\n        <x-group frame>\n          <div slot=\"header\">${label}</div>\n          <div class=\"divide-y divide-contrast-10 pl-s\">${items.map(this.__renderItemsItem)}</div>\n        </x-group>\n        ${this.renderTemplateOrSlot('items:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderEndDate = () => {\n    const { disabledSelector, lang, ns } = this;\n    const formHiddenSelector = this.hiddenSelector.zoom('end-date:form').toString();\n\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('end-date:before')}\n\n        <foxy-form-dialog\n          readonlycontrols=${this.readonlySelector.zoom('end-date:form').toString()}\n          disabledcontrols=${disabledSelector.zoom('end-date:form').toString()}\n          hiddencontrols=\"save-button ${formHiddenSelector}\"\n          data-testid=\"cancellation-form\"\n          parent=${this.parent}\n          header=\"end_subscription\"\n          alert\n          form=\"foxy-cancellation-form\"\n          href=${this.href}\n          lang=${lang}\n          id=\"end-date-form\"\n          ns=${ns}\n          .templates=${this.getNestedTemplates('end-date:form')}\n        >\n        </foxy-form-dialog>\n\n        <vaadin-button\n          data-testid=\"end-date\"\n          theme=\"error\"\n          class=\"w-full\"\n          ?disabled=${!this.data || disabledSelector.matches('end-date', true)}\n          @click=${(evt: Event) => {\n            const form = this.renderRoot.querySelector('#end-date-form') as FormDialog;\n            form.show(evt.currentTarget as ButtonElement);\n          }}\n        >\n          <foxy-i18n key=\"end_subscription\" ns=${ns} lang=${lang}></foxy-i18n>\n        </vaadin-button>\n\n        ${this.renderTemplateOrSlot('end-date:after')}\n      </div>\n    `;\n  };\n\n  private readonly __checkNextTransactionDateAvailability = (date: Date) => {\n    const { settings, data: subscription } = this;\n\n    if (settings && subscription) {\n      const value = serializeDate(date);\n      return isNextTransactionDate({ value, settings, subscription });\n    }\n\n    return date.getTime() >= Date.now();\n  };\n\n  private readonly __renderNextTransactionDate = () => {\n    const { data, lang, ns } = this;\n    const isActive = !!data?.is_active;\n\n    return html`\n      <div data-testid=\"next-transaction-date\">\n        ${this.renderTemplateOrSlot('next-transaction-date:before')}\n\n        <x-group frame>\n          <foxy-i18n key=\"next_transaction_date\" ns=${ns} lang=${lang} slot=\"header\"></foxy-i18n>\n          <foxy-internal-calendar\n            start=${ifDefined(data?.next_transaction_date.substr(0, 10))}\n            value=${ifDefined(data?.next_transaction_date)}\n            lang=${lang}\n            ?readonly=${!isActive || this.readonlySelector.matches('next-transaction-date', true)}\n            ?disabled=${!data || this.disabledSelector.matches('next-transaction-date', true)}\n            .checkAvailability=${this.__checkNextTransactionDateAvailability}\n            @change=${(evt: Event) => {\n              const target = evt.target as InternalCalendar;\n              this.edit({ next_transaction_date: target.value });\n            }}\n          >\n          </foxy-internal-calendar>\n        </x-group>\n\n        ${this.renderTemplateOrSlot('next-transaction-date:after')}\n      </div>\n    `;\n  };\n\n  private readonly __renderFrequencyAsDropdown = () => {\n    const { data } = this;\n    const active = !!data?.is_active;\n    const items = this.__frequencies.map(v => ({\n      label: this.t(v === '.5m' ? 'twice_a_month' : 'frequency', parseFrequency(v)),\n      value: v,\n    }));\n\n    return html`\n      <vaadin-combo-box\n        item-value-path=\"value\"\n        item-label-path=\"label\"\n        data-testid=\"frequency\"\n        ?disabled=${!data || this.disabledSelector.matches('frequency', true)}\n        ?readonly=${data && (!active || this.readonlySelector.matches('frequency', true))}\n        class=\"w-full\"\n        label=${this.t('frequency_label').toString()}\n        value=${ifDefined(this.form.frequency)}\n        .items=${items}\n        @change=${(evt: Event) => {\n          this.edit({ frequency: (evt.target as HTMLInputElement).value });\n        }}\n      >\n      </vaadin-combo-box>\n    `;\n  };\n\n  private readonly __renderFrequencyAsRadioList = () => {\n    const { data, lang, ns } = this;\n\n    return html`\n      <x-group frame>\n        <foxy-i18n key=\"frequency_label\" ns=${ns} lang=${lang} slot=\"header\"></foxy-i18n>\n\n        <x-choice\n          default-custom-value=\"1d\"\n          data-testid=\"frequency\"\n          type=\"frequency\"\n          ns=${SubscriptionForm.defaultNS}\n          ?custom=${this.settings === null}\n          .items=${this.__frequencies}\n          .value=${this.form.frequency ?? null}\n          ?disabled=${!data || this.disabledSelector.matches('frequency', true)}\n          ?readonly=${data && (!data.is_active || this.readonlySelector.matches('frequency', true))}\n          @change=${(evt: Event) => {\n            this.edit({ frequency: (evt.target as HTMLInputElement).value });\n          }}\n        >\n          ${this.__frequencies.map(\n            frequency => html`\n              <foxy-i18n\n                options=${JSON.stringify(parseFrequency(frequency))}\n                slot=\"${frequency}-label\"\n                lang=${lang}\n                key=${frequency === '.5m' ? 'twice_a_month' : 'frequency'}\n                ns=${ns}\n              >\n              </foxy-i18n>\n            `\n          )}\n        </x-choice>\n      </x-group>\n    `;\n  };\n\n  private readonly __renderFrequency = () => {\n    return html`\n      <div>\n        ${this.renderTemplateOrSlot('frequency:before')}\n        ${this.settings && this.__frequencies.length > 4\n          ? this.__renderFrequencyAsDropdown()\n          : this.__renderFrequencyAsRadioList()}\n        ${this.renderTemplateOrSlot('frequency:after')}\n      </div>\n    `;\n  };\n\n  private readonly __transactionsTableColumns = [\n    {\n      cell(ctx: CellContext<TransactionsTableData>) {\n        const colors: Record<string, string> = {\n          declined: 'text-error',\n          rejected: 'text-error',\n        };\n\n        const status = TransactionsTable.statusColumn.cell!(ctx);\n        const price = TransactionsTable.priceColumn.cell!(ctx);\n        const color = colors[ctx.data.status] ?? 'text-body';\n\n        return ctx.html`\n          <span class=\"sr-only\">${status}</span>\n          <span class=\"${color} text-s\">${price}</span>\n        `;\n      },\n    },\n    { cell: TransactionsTable.idColumn.cell, hideBelow: 'sm' },\n    { cell: TransactionsTable.dateColumn.cell },\n    { cell: TransactionsTable.receiptColumn.cell },\n  ];\n\n  private readonly __renderTransactionsPage = ({ html, ...ctx }: PageRendererContext) => {\n    return html`\n      <foxy-table\n        group=${ctx.group}\n        lang=${ctx.lang}\n        href=${ctx.href}\n        ns=\"${ctx.ns} ${customElements.get('foxy-transactions-table')?.defaultNS ?? ''}\"\n        .columns=${this.__transactionsTableColumns}\n      >\n      </foxy-table>\n    `;\n  };\n\n  private readonly __renderTransactions = () => {\n    const { lang, ns } = this;\n\n    return html`\n      <div data-testid=\"transactions\">\n        ${this.renderTemplateOrSlot('transactions:before')}\n\n        <x-group frame>\n          <foxy-i18n lang=${lang} slot=\"header\" key=\"transaction_plural\" ns=${ns}></foxy-i18n>\n          <foxy-collection-pages\n            group=${this.group}\n            class=\"block divide-y divide-contrast-10 px-m\"\n            first=${this.data?._links['fx:transactions'].href ?? ''}\n            lang=${lang}\n            ns=${ns}\n            .page=${this.__renderTransactionsPage}\n          >\n          </foxy-collection-pages>\n        </x-group>\n\n        ${this.renderTemplateOrSlot('transactions:after')}\n      </div>\n    `;\n  };\n\n  render(): TemplateResult {\n    const isBusy = this.in('busy');\n    const isFail = this.in('fail');\n\n    return html`\n      <div\n        data-testid=\"wrapper\"\n        aria-busy=${isBusy}\n        aria-live=\"polite\"\n        class=\"relative space-y-l text-body font-lumo text-m leading-m\"\n      >\n        ${this.hiddenSelector.matches('header', true) ? '' : this.__renderHeader()}\n        ${this.hiddenSelector.matches('items', true) ? '' : this.__renderItems()}\n        ${this.hiddenSelector.matches('end-date', true) ? '' : this.__renderEndDate()}\n        ${this.__isNextTransactionDateVisible ? this.__renderNextTransactionDate() : ''}\n        ${this.__isFrequencyVisible ? this.__renderFrequency() : ''}\n        ${this.hiddenSelector.matches('transactions', true) ? '' : this.__renderTransactions()}\n\n        <div\n          data-testid=\"spinner\"\n          class=${classMap({\n            'transition duration-500 ease-in-out absolute inset-0 flex': true,\n            'opacity-0 pointer-events-none': !isBusy && !isFail,\n          })}\n        >\n          <foxy-spinner\n            layout=\"vertical\"\n            class=\"m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l\"\n            state=${isFail ? 'error' : isBusy ? 'busy' : 'empty'}\n            lang=${this.lang}\n            ns=\"${this.ns} ${customElements.get('foxy-spinner')?.defaultNS ?? ''}\"\n          >\n          </foxy-spinner>\n        </div>\n      </div>\n    `;\n  }\n\n  private get __isNextTransactionDateVisible() {\n    if (this.hiddenSelector.matches('next-transaction-date', true)) return false;\n    if (this.data === null) return false;\n    if (this.data.end_date && new Date(this.data.end_date).getTime() <= Date.now()) return false;\n    if (this.data.is_active === false) return false;\n    if (this.settings === null) return true;\n\n    const rules = this.settings.subscriptions.allow_next_date_modification;\n    return !!getNextTransactionDateConstraints(this.data, rules);\n  }\n\n  private get __isFrequencyVisible() {\n    if (this.hiddenSelector.matches('frequency', true)) return false;\n    if (this.data === null) return false;\n    if (this.data.end_date && new Date(this.data.end_date).getTime() <= Date.now()) return false;\n    if (this.data.is_active === false) return false;\n    if (this.settings === null) return true;\n\n    const allowedFrequencies = getAllowedFrequencies({\n      subscription: this.data,\n      settings: this.settings,\n    });\n\n    return !allowedFrequencies.next().done;\n  }\n\n  private get __frequencies() {\n    if (!this.settings || !this.data) return ['.5m', '1m', '1y'];\n\n    const allowedFrequencies = getAllowedFrequencies({\n      subscription: this.data,\n      settings: this.settings,\n    });\n\n    return Array.from(allowedFrequencies);\n  }\n}\n"]}

package/dist/elements/public/TemplateConfigForm/CountriesList.d.ts

@@ -8,15 +8,13 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
     defaultNS: string;
 } & {
     styles: import("lit-element").CSSResultArray;
-} & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost>;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost>;
 export declare class CountriesList extends Base<Resource<Rels.Countries>> {
     static get scopedElements(): ScopedElementsMap;
     static get properties(): PropertyDeclarations;
     countries: Record<string, '*' | string[]>;
-    disabled: boolean;
-    readonly: boolean;
     regions: string;
-    country: string;
+    private __newCountry;
     render(): TemplateResult;
     private __addCountry;
 }

package/dist/elements/public/TemplateConfigForm/CountriesList.js

@@ -1,20 +1,19 @@
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { html } from 'lit-html';
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
 import { CountryCard } from "./CountryCard.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 { ifDefined } from 'lit-html/directives/if-defined';
-const Base = ScopedElementsMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));
+const Base = ScopedElementsMixin(ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement))));
 export class CountriesList extends Base {
     constructor() {
         super(...arguments);
         this.countries = {};
-        this.disabled = false;
-        this.readonly = false;
         this.regions = '';
-        this.country = '';
+        this.__newCountry = '';
     }
     static get scopedElements() {
         return {
@@ -25,18 +24,16 @@ export class CountriesList extends Base {
     static get properties() {
         return {
             ...super.properties,
+            __newCountry: { attribute: false },
             countries: { type: Object },
-            disabled: { type: Boolean },
-            readonly: { type: Boolean },
             regions: { type: String },
-            country: { type: String },
         };
     }
     render() {
         var _a, _b;
         return html `
       <div>
-        <div class="space-y-s">
+        <div class="space-y-s" data-testid="countries">
           ${Object.entries(this.countries).map(([country, regions]) => {
             var _a, _b;
             let regionsLink;
@@ -77,6 +74,7 @@ export class CountriesList extends Base {
         })}
 
           <div
+            data-testid="new-country"
             class=${classMap({
             'h-m flex items-center rounded transition-colors': true,
             'border border-contrast-10 ring-primary-50': true,
@@ -90,30 +88,31 @@ export class CountriesList extends Base {
               placeholder=${this.t('add_country')}
               class="w-full bg-transparent appearance-none h-m text-s px-m focus-outline-none"
               list="list"
-              .value=${this.country}
+              .value=${this.__newCountry}
               ?disabled=${this.disabled}
               ?readonly=${this.readonly}
               @keydown=${(evt) => {
-            if (evt.key === 'Enter' && this.country)
+            if (evt.key === 'Enter' && this.__newCountry)
                 this.__addCountry();
         }}
               @input=${(evt) => {
             const target = evt.currentTarget;
-            this.country = target.value;
+            this.__newCountry = target.value;
         }}
             />
 
             <button
+              aria-label=${this.t('create')}
               class=${classMap({
             'mr-xs flex-shrink-0': true,
             'flex items-center justify-center rounded-full transition-colors': true,
-            'bg-contrast-5 text-disabled cursor-default': !this.country,
-            'bg-success-10 text-success cursor-pointer': !!this.country,
-            'hover-bg-success hover-text-success-contrast': !!this.country,
-            'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.country,
+            'bg-contrast-5 text-disabled cursor-default': !this.__newCountry,
+            'bg-success-10 text-success cursor-pointer': !!this.__newCountry,
+            'hover-bg-success hover-text-success-contrast': !!this.__newCountry,
+            'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.__newCountry,
         })}
               style="width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)"
-              ?disabled=${!this.country || this.disabled}
+              ?disabled=${!this.__newCountry || this.disabled}
               @click=${this.__addCountry}
             >
               <iron-icon icon="icons:add" class="icon-inline text-m"></iron-icon>
@@ -122,16 +121,16 @@ export class CountriesList extends Base {
         </div>
 
         <datalist id="list">
-          ${Object.values((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : {}).map(country => {
-            return html `<option value=${country.cc2}>${country.default}</option>`;
+          ${Object.entries((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : {}).map(([code, country]) => {
+            return html `<option value=${code}>${country.default}</option>`;
         })}
         </datalist>
       </div>
     `;
     }
     __addCountry() {
-        this.countries = { ...this.countries, [this.country]: '*' };
-        this.country = '';
+        this.countries = { ...this.countries, [this.__newCountry]: '*' };
+        this.__newCountry = '';
         this.dispatchEvent(new CustomEvent('update:countries'));
     }
 }