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

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,34 +74,45 @@ export class CountriesList extends Base {
         })}
 
           <div
-            class="h-m flex items-center rounded transition-colors border border-contrast-10 hover-border-contrast-40 focus-within-ring-1 focus-within-ring-primary-50 focus-within-border-primary-50"
+            data-testid="new-country"
+            class=${classMap({
+            'h-m flex items-center rounded transition-colors': true,
+            'border border-contrast-10 ring-primary-50': true,
+            'hover-border-contrast-40': !this.disabled,
+            'focus-within-ring-1 focus-within-border-primary-50': !this.disabled,
+            'flex': !this.readonly,
+            'hidden': this.readonly,
+        })}
           >
             <input
               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}
+              ?disabled=${!this.__newCountry || this.disabled}
               @click=${this.__addCountry}
             >
               <iron-icon icon="icons:add" class="icon-inline text-m"></iron-icon>
@@ -113,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'));
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CountriesList.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateConfigForm/CountriesList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAClF,OAAO,EAAkB,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,yBAAsB;AAC5C,OAAO,EAAE,cAAc,EAAE,4CAAyC;AAIlE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,MAAM,IAAI,GAAG,mBAAmB,CAAC,cAAc,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;AAEpF,MAAM,OAAO,aAAc,SAAQ,IAA8B;IAAjE;;QAmBE,cAAS,GAAmC,EAAE,CAAC;QAE/C,aAAQ,GAAG,KAAK,CAAC;QAEjB,aAAQ,GAAG,KAAK,CAAC;QAEjB,YAAO,GAAG,EAAE,CAAC;QAEb,YAAO,GAAG,EAAE,CAAC;IAiGf,CAAC;IA3HC,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,gBAAgB,EAAE,WAAW;YAC7B,WAAW,EAAE,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC;SAC7C,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YAC3B,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC3B,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B,CAAC;IACJ,CAAC;IAYD,MAAM;;QACJ,OAAO,IAAI,CAAA;;;YAGH,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,EAAE;;YAC1D,IAAI,WAAmB,CAAC;YAExB,IAAI;gBACF,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBAClC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;gBAC9C,WAAW,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;aAC9B;YAAC,WAAM;gBACN,WAAW,GAAG,EAAE,CAAC;aAClB;YAED,OAAO,IAAI,CAAA;;0BAEG,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;uBACjD,OAAO;uBACP,SAAS,aAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAC,OAAO,2CAAG,OAAO,CAAC;uBAC9C,WAAW;uBACX,IAAI,CAAC,IAAI;qBACX,IAAI,CAAC,EAAE;4BACA,IAAI,CAAC,QAAQ;4BACb,IAAI,CAAC,QAAQ;kCACP,CAAC,GAAgB,EAAE,EAAE;gBACrC,MAAM,YAAY,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;gBAC3C,MAAM,UAAU,GAAI,GAAG,CAAC,aAA6B,CAAC,OAAO,CAAC;gBAE9D,YAAY,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC;gBAC7D,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;gBAE9B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC;YAC1D,CAAC;0BACS,GAAG,EAAE;gBACb,MAAM,YAAY,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;gBAC3C,OAAO,YAAY,CAAC,OAAO,CAAC,CAAC;gBAC7B,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;gBAE9B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC;YAC1D,CAAC;;;aAGJ,CAAC;QACJ,CAAC,CAAC;;;;;;4BAMgB,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC;;;uBAG1B,IAAI,CAAC,OAAO;yBACV,CAAC,GAAkB,EAAE,EAAE;YAChC,IAAI,GAAG,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,OAAO;gBAAE,IAAI,CAAC,YAAY,EAAE,CAAC;QAC/D,CAAC;uBACQ,CAAC,GAAe,EAAE,EAAE;YAC3B,MAAM,MAAM,GAAG,GAAG,CAAC,aAAiC,CAAC;YACrD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC;QAC9B,CAAC;;;;sBAIO,QAAQ,CAAC;YACf,qBAAqB,EAAE,IAAI;YAC3B,iEAAiE,EAAE,IAAI;YACvE,4CAA4C,EAAE,CAAC,IAAI,CAAC,OAAO;YAC3D,2CAA2C,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;YAC3D,8CAA8C,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;YAC9D,4DAA4D,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;SAC7E,CAAC;;0BAEU,CAAC,IAAI,CAAC,OAAO;uBAChB,IAAI,CAAC,YAAY;;;;;;;;YAQ5B,MAAM,CAAC,MAAM,aAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,mCAAI,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACrD,OAAO,IAAI,CAAA,iBAAiB,OAAO,CAAC,GAAG,IAAI,OAAO,CAAC,OAAO,WAAW,CAAC;QACxE,CAAC,CAAC;;;KAGP,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;QAC5D,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC1D,CAAC;CACF","sourcesContent":["import { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { CountryCard } from './CountryCard';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nconst Base = ScopedElementsMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));\n\nexport class CountriesList extends Base<Resource<Rels.Countries>> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'x-country-card': CountryCard,\n      'iron-icon': customElements.get('iron-icon'),\n    };\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      countries: { type: Object },\n      disabled: { type: Boolean },\n      readonly: { type: Boolean },\n      regions: { type: String },\n      country: { type: String },\n    };\n  }\n\n  countries: Record<string, '*' | string[]> = {};\n\n  disabled = false;\n\n  readonly = false;\n\n  regions = '';\n\n  country = '';\n\n  render(): TemplateResult {\n    return html`\n      <div>\n        <div class=\"space-y-s\">\n          ${Object.entries(this.countries).map(([country, regions]) => {\n            let regionsLink: string;\n\n            try {\n              const url = new URL(this.regions);\n              url.searchParams.set('country_code', country);\n              regionsLink = url.toString();\n            } catch {\n              regionsLink = '';\n            }\n\n            return html`\n              <x-country-card\n                regions=${JSON.stringify(regions === '*' ? [] : regions)}\n                code=${country}\n                name=${ifDefined(this.data?.values[country]?.default)}\n                href=${regionsLink}\n                lang=${this.lang}\n                ns=${this.ns}\n                ?disabled=${this.disabled}\n                ?readonly=${this.readonly}\n                @update:regions=${(evt: CustomEvent) => {\n                  const newCountries = { ...this.countries };\n                  const newRegions = (evt.currentTarget as CountryCard).regions;\n\n                  newCountries[country] = newRegions.length ? newRegions : '*';\n                  this.countries = newCountries;\n\n                  this.dispatchEvent(new CustomEvent('update:countries'));\n                }}\n                @delete=${() => {\n                  const newCountries = { ...this.countries };\n                  delete newCountries[country];\n                  this.countries = newCountries;\n\n                  this.dispatchEvent(new CustomEvent('update:countries'));\n                }}\n              >\n              </x-country-card>\n            `;\n          })}\n\n          <div\n            class=\"h-m flex items-center rounded transition-colors border border-contrast-10 hover-border-contrast-40 focus-within-ring-1 focus-within-ring-primary-50 focus-within-border-primary-50\"\n          >\n            <input\n              placeholder=${this.t('add_country')}\n              class=\"w-full bg-transparent appearance-none h-m text-s px-m focus-outline-none\"\n              list=\"list\"\n              .value=${this.country}\n              @keydown=${(evt: KeyboardEvent) => {\n                if (evt.key === 'Enter' && this.country) this.__addCountry();\n              }}\n              @input=${(evt: InputEvent) => {\n                const target = evt.currentTarget as HTMLInputElement;\n                this.country = target.value;\n              }}\n            />\n\n            <button\n              class=${classMap({\n                'mr-xs flex-shrink-0': true,\n                'flex items-center justify-center rounded-full transition-colors': true,\n                'bg-contrast-5 text-disabled cursor-default': !this.country,\n                'bg-success-10 text-success cursor-pointer': !!this.country,\n                'hover-bg-success hover-text-success-contrast': !!this.country,\n                'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.country,\n              })}\n              style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n              ?disabled=${!this.country}\n              @click=${this.__addCountry}\n            >\n              <iron-icon icon=\"icons:add\" class=\"icon-inline text-m\"></iron-icon>\n            </button>\n          </div>\n        </div>\n\n        <datalist id=\"list\">\n          ${Object.values(this.data?.values ?? {}).map(country => {\n            return html`<option value=${country.cc2}>${country.default}</option>`;\n          })}\n        </datalist>\n      </div>\n    `;\n  }\n\n  private __addCountry() {\n    this.countries = { ...this.countries, [this.country]: '*' };\n    this.country = '';\n    this.dispatchEvent(new CustomEvent('update:countries'));\n  }\n}\n"]}
+{"version":3,"file":"CountriesList.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateConfigForm/CountriesList.ts"],"names":[],"mappings":"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","sourcesContent":["import { ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { CountryCard } from './CountryCard';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\nimport { ifDefined } from 'lit-html/directives/if-defined';\n\nconst Base = ScopedElementsMixin(\n  ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)))\n);\n\nexport class CountriesList extends Base<Resource<Rels.Countries>> {\n  static get scopedElements(): ScopedElementsMap {\n    return {\n      'x-country-card': CountryCard,\n      'iron-icon': customElements.get('iron-icon'),\n    };\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __newCountry: { attribute: false },\n      countries: { type: Object },\n      regions: { type: String },\n    };\n  }\n\n  countries: Record<string, '*' | string[]> = {};\n\n  regions = '';\n\n  private __newCountry = '';\n\n  render(): TemplateResult {\n    return html`\n      <div>\n        <div class=\"space-y-s\" data-testid=\"countries\">\n          ${Object.entries(this.countries).map(([country, regions]) => {\n            let regionsLink: string;\n\n            try {\n              const url = new URL(this.regions);\n              url.searchParams.set('country_code', country);\n              regionsLink = url.toString();\n            } catch {\n              regionsLink = '';\n            }\n\n            return html`\n              <x-country-card\n                regions=${JSON.stringify(regions === '*' ? [] : regions)}\n                code=${country}\n                name=${ifDefined(this.data?.values[country]?.default)}\n                href=${regionsLink}\n                lang=${this.lang}\n                ns=${this.ns}\n                ?disabled=${this.disabled}\n                ?readonly=${this.readonly}\n                @update:regions=${(evt: CustomEvent) => {\n                  const newCountries = { ...this.countries };\n                  const newRegions = (evt.currentTarget as CountryCard).regions;\n\n                  newCountries[country] = newRegions.length ? newRegions : '*';\n                  this.countries = newCountries;\n\n                  this.dispatchEvent(new CustomEvent('update:countries'));\n                }}\n                @delete=${() => {\n                  const newCountries = { ...this.countries };\n                  delete newCountries[country];\n                  this.countries = newCountries;\n\n                  this.dispatchEvent(new CustomEvent('update:countries'));\n                }}\n              >\n              </x-country-card>\n            `;\n          })}\n\n          <div\n            data-testid=\"new-country\"\n            class=${classMap({\n              'h-m flex items-center rounded transition-colors': true,\n              'border border-contrast-10 ring-primary-50': true,\n              'hover-border-contrast-40': !this.disabled,\n              'focus-within-ring-1 focus-within-border-primary-50': !this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n            })}\n          >\n            <input\n              placeholder=${this.t('add_country')}\n              class=\"w-full bg-transparent appearance-none h-m text-s px-m focus-outline-none\"\n              list=\"list\"\n              .value=${this.__newCountry}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\n              @keydown=${(evt: KeyboardEvent) => {\n                if (evt.key === 'Enter' && this.__newCountry) this.__addCountry();\n              }}\n              @input=${(evt: InputEvent) => {\n                const target = evt.currentTarget as HTMLInputElement;\n                this.__newCountry = target.value;\n              }}\n            />\n\n            <button\n              aria-label=${this.t('create')}\n              class=${classMap({\n                'mr-xs flex-shrink-0': true,\n                'flex items-center justify-center rounded-full transition-colors': true,\n                'bg-contrast-5 text-disabled cursor-default': !this.__newCountry,\n                'bg-success-10 text-success cursor-pointer': !!this.__newCountry,\n                'hover-bg-success hover-text-success-contrast': !!this.__newCountry,\n                'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.__newCountry,\n              })}\n              style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n              ?disabled=${!this.__newCountry || this.disabled}\n              @click=${this.__addCountry}\n            >\n              <iron-icon icon=\"icons:add\" class=\"icon-inline text-m\"></iron-icon>\n            </button>\n          </div>\n        </div>\n\n        <datalist id=\"list\">\n          ${Object.entries(this.data?.values ?? {}).map(([code, country]) => {\n            return html`<option value=${code}>${country.default}</option>`;\n          })}\n        </datalist>\n      </div>\n    `;\n  }\n\n  private __addCountry() {\n    this.countries = { ...this.countries, [this.__newCountry]: '*' };\n    this.__newCountry = '';\n    this.dispatchEvent(new CustomEvent('update:countries'));\n  }\n}\n"]}

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

@@ -11,9 +11,9 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
 export declare class CountryCard extends Base<Resource<Rels.Regions>> {
     static get properties(): PropertyDeclarations;
     regions: string[];
-    region: string;
     name: string;
     code: string;
+    private __newRegion;
     render(): TemplateResult;
     private __addRegion;
 }

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

@@ -9,15 +9,15 @@ export class CountryCard extends Base {
     constructor() {
         super(...arguments);
         this.regions = [];
-        this.region = '';
         this.name = '';
         this.code = '';
+        this.__newRegion = '';
     }
     static get properties() {
         return {
             ...super.properties,
+            __newRegion: { attribute: false },
             regions: { type: Array },
-            region: { type: String },
             name: { type: String },
             code: { type: String },
         };
@@ -25,23 +25,40 @@ export class CountryCard extends Base {
     render() {
         var _a, _b;
         return html `
-      <div class="border border-contrast-10 rounded text-s">
-        <div class="h-m flex justify-between items-center border-b border-contrast-10">
+      <div
+        class=${classMap({
+            'border border-contrast-10 rounded text-s': true,
+            'text-disabled': this.disabled,
+        })}
+      >
+        <div
+          data-testid="country"
+          class="h-m flex justify-between items-center border-b border-contrast-10"
+        >
           <div class="ml-m">
             <span>${this.name || this.code}</span>
             ${this.name ? html `<span class="text-secondary">${this.code}</span>` : ''}
           </div>
 
           <button
-            class="mr-xs flex items-center justify-center rounded-full transition-colors hover-bg-error-10 hover-text-error focus-outline-none focus-ring-2 focus-ring-inset focus-ring-error-50"
+            aria-label=${this.t('delete')}
+            class=${classMap({
+            'mr-xs items-center justify-center rounded-full transition-colors': true,
+            'hover-bg-error-10 hover-text-error': !this.disabled,
+            'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,
+            'cursor-default': this.disabled,
+            'flex': !this.readonly,
+            'hidden': this.readonly,
+        })}
             style="width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)"
+            ?disabled=${this.disabled}
             @click=${() => this.dispatchEvent(new CustomEvent('delete'))}
           >
             <iron-icon icon="icons:close" class="icon-inline text-m"></iron-icon>
           </button>
         </div>
 
-        <div class="flex flex-wrap p-xs">
+        <div data-testid="regions" class="flex flex-wrap p-xs">
           ${this.regions.map(region => {
             var _a, _b;
             const name = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.values[region]) === null || _b === void 0 ? void 0 : _b.default;
@@ -57,8 +74,17 @@ export class CountryCard extends Base {
                 </span>
 
                 <button
-                  class="flex items-center justify-center rounded-full transition-colors hover-bg-error-10 hover-text-error focus-outline-none focus-ring-2 focus-ring-inset focus-ring-error-50"
+                  aria-label=${this.t('delete')}
+                  class=${classMap({
+                'items-center justify-center rounded-full transition-colors': true,
+                'hover-bg-error-10 hover-text-error': !this.disabled,
+                'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,
+                'cursor-default': this.disabled,
+                'flex': !this.readonly,
+                'hidden': this.readonly,
+            })}
                   style="width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)"
+                  ?disabled=${this.disabled}
                   @click=${() => {
                 this.regions = this.regions.filter(value => value !== region);
                 this.dispatchEvent(new CustomEvent('update:regions'));
@@ -71,22 +97,31 @@ export class CountryCard extends Base {
         })}
 
           <div
-            class="h-s m-xs flex items-center transition-colors border border-contrast-10 hover-border-contrast-40 focus-within-ring-1 focus-within-ring-primary-50 focus-within-border-primary-50"
+            data-testid="new-region"
             style="border-radius: var(--lumo-size-s)"
+            class=${classMap({
+            'h-s m-xs items-center transition-colors border border-contrast-10': true,
+            'hover-border-contrast-40': !this.disabled,
+            'focus-within-ring-1 ring-primary-50 focus-within-border-primary-50': !this.disabled,
+            'flex': !this.readonly,
+            'hidden': this.readonly,
+        })}
           >
             <input
               placeholder=${this.t('add_region')}
               class="bg-transparent appearance-none h-s text-s px-s focus-outline-none"
               style="width: 8rem"
               list="list"
-              .value=${this.region}
+              .value=${this.__newRegion}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
               @keydown=${(evt) => {
-            if (evt.key === 'Enter' && this.region)
+            if (evt.key === 'Enter' && this.__newRegion)
                 this.__addRegion();
         }}
               @input=${(evt) => {
             const target = evt.currentTarget;
-            this.region = target.value;
+            this.__newRegion = target.value;
         }}
             />
 
@@ -95,12 +130,12 @@ export class CountryCard extends Base {
               class=${classMap({
             'flex-shrink-0': true,
             'flex items-center justify-center rounded-full transition-colors': true,
-            'bg-contrast-5 text-disabled cursor-default': !this.region,
-            'bg-success-10 text-success cursor-pointer': !!this.region,
-            'hover-bg-success hover-text-success-contrast': !!this.region,
-            'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.region,
+            'bg-contrast-5 text-disabled cursor-default': !this.__newRegion,
+            'bg-success-10 text-success cursor-pointer': !!this.__newRegion,
+            'hover-bg-success hover-text-success-contrast': !!this.__newRegion,
+            'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.__newRegion,
         })}
-              ?disabled=${!this.region}
+              ?disabled=${this.disabled || !this.__newRegion}
               @click=${this.__addRegion}
             >
               <iron-icon icon="icons:add" class="icon-inline text-m"></iron-icon>
@@ -117,8 +152,8 @@ export class CountryCard extends Base {
     `;
     }
     __addRegion() {
-        this.regions = [...new Set([...this.regions, this.region])];
-        this.region = '';
+        this.regions = [...new Set([...this.regions, this.__newRegion])];
+        this.__newRegion = '';
         this.dispatchEvent(new CustomEvent('update:regions'));
     }
 }

package/dist/elements/public/TemplateConfigForm/CountryCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountryCard.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateConfigForm/CountryCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));\n\nexport class CountryCard extends Base<Resource<Rels.Regions>> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      regions: { type: Array },\n      region: { type: String },\n      name: { type: String },\n      code: { type: String },\n    };\n  }\n\n  regions: string[] = [];\n\n  region = '';\n\n  name = '';\n\n  code = '';\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"border border-contrast-10 rounded text-s\">\n        <div class=\"h-m flex justify-between items-center border-b border-contrast-10\">\n          <div class=\"ml-m\">\n            <span>${this.name || this.code}</span>\n            ${this.name ? html`<span class=\"text-secondary\">${this.code}</span>` : ''}\n          </div>\n\n          <button\n            class=\"mr-xs flex items-center justify-center rounded-full transition-colors hover-bg-error-10 hover-text-error focus-outline-none focus-ring-2 focus-ring-inset focus-ring-error-50\"\n            style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n            @click=${() => this.dispatchEvent(new CustomEvent('delete'))}\n          >\n            <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n          </button>\n        </div>\n\n        <div class=\"flex flex-wrap p-xs\">\n          ${this.regions.map(region => {\n            const name = this.data?.values[region]?.default;\n            const code = region;\n\n            return html`\n              <div\n                class=\"flex items-center border border-contrast-10 h-s m-xs\"\n                style=\"border-radius: var(--lumo-size-s)\"\n              >\n                <span class=\"mx-s\">\n                  <span>${name || code}</span>\n                  ${name ? html`<span class=\"text-secondary\">${code}</span>` : ''}\n                </span>\n\n                <button\n                  class=\"flex items-center justify-center rounded-full transition-colors hover-bg-error-10 hover-text-error focus-outline-none focus-ring-2 focus-ring-inset focus-ring-error-50\"\n                  style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n                  @click=${() => {\n                    this.regions = this.regions.filter(value => value !== region);\n                    this.dispatchEvent(new CustomEvent('update:regions'));\n                  }}\n                >\n                  <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n                </button>\n              </div>\n            `;\n          })}\n\n          <div\n            class=\"h-s m-xs flex items-center transition-colors border border-contrast-10 hover-border-contrast-40 focus-within-ring-1 focus-within-ring-primary-50 focus-within-border-primary-50\"\n            style=\"border-radius: var(--lumo-size-s)\"\n          >\n            <input\n              placeholder=${this.t('add_region')}\n              class=\"bg-transparent appearance-none h-s text-s px-s focus-outline-none\"\n              style=\"width: 8rem\"\n              list=\"list\"\n              .value=${this.region}\n              @keydown=${(evt: KeyboardEvent) => {\n                if (evt.key === 'Enter' && this.region) this.__addRegion();\n              }}\n              @input=${(evt: InputEvent) => {\n                const target = evt.currentTarget as HTMLInputElement;\n                this.region = target.value;\n              }}\n            />\n\n            <button\n              style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n              class=${classMap({\n                'flex-shrink-0': true,\n                'flex items-center justify-center rounded-full transition-colors': true,\n                'bg-contrast-5 text-disabled cursor-default': !this.region,\n                'bg-success-10 text-success cursor-pointer': !!this.region,\n                'hover-bg-success hover-text-success-contrast': !!this.region,\n                'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.region,\n              })}\n              ?disabled=${!this.region}\n              @click=${this.__addRegion}\n            >\n              <iron-icon icon=\"icons:add\" class=\"icon-inline text-m\"></iron-icon>\n            </button>\n          </div>\n\n          <datalist id=\"list\">\n            ${Object.values(this.data?.values ?? {}).map(region => {\n              return html`<option value=${region.code}>${region.default}</option>`;\n            })}\n          </datalist>\n        </div>\n      </div>\n    `;\n  }\n\n  private __addRegion() {\n    this.regions = [...new Set([...this.regions, this.region])];\n    this.region = '';\n    this.dispatchEvent(new CustomEvent('update:regions'));\n  }\n}\n"]}
+{"version":3,"file":"CountryCard.js","sourceRoot":"","sources":["../../../../src/elements/public/TemplateConfigForm/CountryCard.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit-html';\n\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { NucleonElement } from '../NucleonElement/NucleonElement';\nimport { PropertyDeclarations } from 'lit-element';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { classMap } from '../../../utils/class-map';\n\nconst Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));\n\nexport class CountryCard extends Base<Resource<Rels.Regions>> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __newRegion: { attribute: false },\n      regions: { type: Array },\n      name: { type: String },\n      code: { type: String },\n    };\n  }\n\n  regions: string[] = [];\n\n  name = '';\n\n  code = '';\n\n  private __newRegion = '';\n\n  render(): TemplateResult {\n    return html`\n      <div\n        class=${classMap({\n          'border border-contrast-10 rounded text-s': true,\n          'text-disabled': this.disabled,\n        })}\n      >\n        <div\n          data-testid=\"country\"\n          class=\"h-m flex justify-between items-center border-b border-contrast-10\"\n        >\n          <div class=\"ml-m\">\n            <span>${this.name || this.code}</span>\n            ${this.name ? html`<span class=\"text-secondary\">${this.code}</span>` : ''}\n          </div>\n\n          <button\n            aria-label=${this.t('delete')}\n            class=${classMap({\n              'mr-xs items-center justify-center rounded-full transition-colors': true,\n              'hover-bg-error-10 hover-text-error': !this.disabled,\n              'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,\n              'cursor-default': this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n            })}\n            style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n            ?disabled=${this.disabled}\n            @click=${() => this.dispatchEvent(new CustomEvent('delete'))}\n          >\n            <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n          </button>\n        </div>\n\n        <div data-testid=\"regions\" class=\"flex flex-wrap p-xs\">\n          ${this.regions.map(region => {\n            const name = this.data?.values[region]?.default;\n            const code = region;\n\n            return html`\n              <div\n                class=\"flex items-center border border-contrast-10 h-s m-xs\"\n                style=\"border-radius: var(--lumo-size-s)\"\n              >\n                <span class=\"mx-s\">\n                  <span>${name || code}</span>\n                  ${name ? html`<span class=\"text-secondary\">${code}</span>` : ''}\n                </span>\n\n                <button\n                  aria-label=${this.t('delete')}\n                  class=${classMap({\n                    'items-center justify-center rounded-full transition-colors': true,\n                    'hover-bg-error-10 hover-text-error': !this.disabled,\n                    'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,\n                    'cursor-default': this.disabled,\n                    'flex': !this.readonly,\n                    'hidden': this.readonly,\n                  })}\n                  style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n                  ?disabled=${this.disabled}\n                  @click=${() => {\n                    this.regions = this.regions.filter(value => value !== region);\n                    this.dispatchEvent(new CustomEvent('update:regions'));\n                  }}\n                >\n                  <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n                </button>\n              </div>\n            `;\n          })}\n\n          <div\n            data-testid=\"new-region\"\n            style=\"border-radius: var(--lumo-size-s)\"\n            class=${classMap({\n              'h-s m-xs items-center transition-colors border border-contrast-10': true,\n              'hover-border-contrast-40': !this.disabled,\n              'focus-within-ring-1 ring-primary-50 focus-within-border-primary-50': !this.disabled,\n              'flex': !this.readonly,\n              'hidden': this.readonly,\n            })}\n          >\n            <input\n              placeholder=${this.t('add_region')}\n              class=\"bg-transparent appearance-none h-s text-s px-s focus-outline-none\"\n              style=\"width: 8rem\"\n              list=\"list\"\n              .value=${this.__newRegion}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\n              @keydown=${(evt: KeyboardEvent) => {\n                if (evt.key === 'Enter' && this.__newRegion) this.__addRegion();\n              }}\n              @input=${(evt: InputEvent) => {\n                const target = evt.currentTarget as HTMLInputElement;\n                this.__newRegion = target.value;\n              }}\n            />\n\n            <button\n              style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n              class=${classMap({\n                'flex-shrink-0': true,\n                'flex items-center justify-center rounded-full transition-colors': true,\n                'bg-contrast-5 text-disabled cursor-default': !this.__newRegion,\n                'bg-success-10 text-success cursor-pointer': !!this.__newRegion,\n                'hover-bg-success hover-text-success-contrast': !!this.__newRegion,\n                'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.__newRegion,\n              })}\n              ?disabled=${this.disabled || !this.__newRegion}\n              @click=${this.__addRegion}\n            >\n              <iron-icon icon=\"icons:add\" class=\"icon-inline text-m\"></iron-icon>\n            </button>\n          </div>\n\n          <datalist id=\"list\">\n            ${Object.values(this.data?.values ?? {}).map(region => {\n              return html`<option value=${region.code}>${region.default}</option>`;\n            })}\n          </datalist>\n        </div>\n      </div>\n    `;\n  }\n\n  private __addRegion() {\n    this.regions = [...new Set([...this.regions, this.__newRegion])];\n    this.__newRegion = '';\n    this.dispatchEvent(new CustomEvent('update:regions'));\n  }\n}\n"]}