@foxy.io/elements 1.14.0-beta.9 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/foxy-access-recovery-form.js +1 -1
- package/dist/cdn/foxy-address-card.js +1 -1
- package/dist/cdn/foxy-address-form.js +1 -1
- package/dist/cdn/foxy-applied-tax-card.js +1 -1
- package/dist/cdn/foxy-attribute-card.js +1 -1
- package/dist/cdn/foxy-attribute-form.js +1 -1
- package/dist/cdn/foxy-cancellation-form.js +1 -1
- package/dist/cdn/foxy-collection-page.js +1 -1
- package/dist/cdn/foxy-collection-pages.js +1 -1
- package/dist/cdn/foxy-custom-field-card.js +1 -1
- package/dist/cdn/foxy-custom-field-form.js +1 -1
- package/dist/cdn/foxy-customer-card.js +1 -1
- package/dist/cdn/foxy-customer-form.js +1 -1
- package/dist/cdn/foxy-customer-portal-settings.js +1 -1
- package/dist/cdn/foxy-customer-portal.js +18 -15
- package/dist/cdn/foxy-customer.js +1 -1
- package/dist/cdn/foxy-customers-table.js +1 -1
- package/dist/cdn/foxy-discount-card.js +1 -1
- package/dist/cdn/foxy-donation.js +1 -1
- package/dist/cdn/foxy-email-template-form.js +1 -1
- package/dist/cdn/foxy-error-entry-card.js +1 -1
- package/dist/cdn/foxy-form-dialog.js +1 -1
- package/dist/cdn/foxy-i18n.js +1 -1
- package/dist/cdn/foxy-items-form.js +1 -1
- package/dist/cdn/foxy-payment-card.js +1 -1
- package/dist/cdn/foxy-payment-method-card.js +1 -1
- package/dist/cdn/foxy-query-builder.js +1 -1
- package/dist/cdn/foxy-sign-in-form.js +1 -1
- package/dist/cdn/foxy-spinner.js +1 -1
- package/dist/cdn/foxy-subscription-card.js +1 -1
- package/dist/cdn/foxy-subscription-form.js +3 -3
- package/dist/cdn/foxy-subscriptions-table.js +1 -1
- package/dist/cdn/foxy-table.js +1 -1
- package/dist/cdn/foxy-tax-card.js +1 -1
- package/dist/cdn/foxy-tax-form.js +1 -1
- package/dist/cdn/foxy-template-config-form.js +1 -1
- package/dist/cdn/foxy-template-form.js +1 -1
- package/dist/cdn/foxy-transaction-card.js +1 -1
- package/dist/cdn/foxy-transactions-table.js +1 -1
- package/dist/cdn/foxy-user-form.js +1 -1
- package/dist/cdn/foxy-users-table.js +1 -1
- package/dist/cdn/{shared-4ba926ca.js → shared-07abcd7b.js} +1 -1
- package/dist/cdn/{shared-ca7c3b9a.js → shared-322e60b1.js} +1 -1
- package/dist/cdn/shared-35dbd2c5.js +1 -0
- package/dist/cdn/{shared-5d94bacb.js → shared-5c8b531d.js} +1 -1
- package/dist/cdn/{shared-7007dedb.js → shared-5f54e916.js} +1 -1
- package/dist/cdn/{shared-00070cc4.js → shared-7a42073a.js} +5 -5
- package/dist/cdn/{shared-b24377bf.js → shared-8a7bee0d.js} +1 -1
- package/dist/cdn/{shared-da787055.js → shared-91e768be.js} +1 -1
- package/dist/cdn/{shared-d01035c5.js → shared-9a40309d.js} +1 -1
- package/dist/cdn/{shared-a3d2c48e.js → shared-b5147166.js} +1 -1
- package/dist/cdn/{shared-d05c93a5.js → shared-bc2bfe52.js} +1 -1
- package/dist/cdn/{shared-c5ae5d33.js → shared-ce1da35d.js} +1 -1
- package/dist/cdn/{shared-0f9809ab.js → shared-d01d809a.js} +1 -1
- package/dist/cdn/{shared-31d03530.js → shared-d8ffb279.js} +1 -1
- package/dist/cdn/{shared-daf6b763.js → shared-e5cbf291.js} +1 -1
- package/dist/cdn/{shared-007c4e34.js → shared-f1dc1c6c.js} +1 -1
- package/dist/cdn/translations/shared/de.json +94 -0
- package/dist/cdn/translations/shared/en.json +83 -83
- package/dist/cdn/translations/shared/es.json +93 -0
- package/dist/elements/public/CustomerPortal/InternalCustomerPortalLink.d.ts +1 -0
- package/dist/elements/public/CustomerPortal/InternalCustomerPortalLink.js +17 -8
- package/dist/elements/public/CustomerPortal/InternalCustomerPortalLink.js.map +1 -1
- package/dist/elements/public/CustomerPortal/InternalCustomerPortalSubscriptions.js +11 -3
- package/dist/elements/public/CustomerPortal/InternalCustomerPortalSubscriptions.js.map +1 -1
- package/dist/elements/public/ItemsForm/private/Picture.d.ts +1 -0
- package/dist/elements/public/ItemsForm/private/Picture.js +2 -0
- package/dist/elements/public/ItemsForm/private/Picture.js.map +1 -1
- package/dist/elements/public/SubscriptionForm/SubscriptionForm.js +12 -4
- package/dist/elements/public/SubscriptionForm/SubscriptionForm.js.map +1 -1
- package/dist/elements/public/TemplateConfigForm/CountriesList.d.ts +2 -4
- package/dist/elements/public/TemplateConfigForm/CountriesList.js +19 -20
- package/dist/elements/public/TemplateConfigForm/CountriesList.js.map +1 -1
- package/dist/elements/public/TemplateConfigForm/CountryCard.d.ts +1 -3
- package/dist/elements/public/TemplateConfigForm/CountryCard.js +21 -18
- package/dist/elements/public/TemplateConfigForm/CountryCard.js.map +1 -1
- package/dist/elements/public/TemplateConfigForm/TemplateConfigForm.js +163 -151
- package/dist/elements/public/TemplateConfigForm/TemplateConfigForm.js.map +1 -1
- package/dist/mixins/themeable.js +10 -8
- package/dist/mixins/themeable.js.map +1 -1
- package/dist/mixins/translatable.js +1 -1
- package/dist/mixins/translatable.js.map +1 -1
- package/package.json +1 -1
- package/dist/cdn/shared-fe8a7aa2.js +0 -1
|
@@ -1 +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\"> </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\"> </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"]}
|
|
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\"> </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\"> </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"]}
|
|
@@ -8,15 +8,13 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
|
|
|
8
8
|
defaultNS: string;
|
|
9
9
|
} & {
|
|
10
10
|
styles: import("lit-element").CSSResultArray;
|
|
11
|
-
} & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost>;
|
|
11
|
+
} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost>;
|
|
12
12
|
export declare class CountriesList extends Base<Resource<Rels.Countries>> {
|
|
13
13
|
static get scopedElements(): ScopedElementsMap;
|
|
14
14
|
static get properties(): PropertyDeclarations;
|
|
15
15
|
countries: Record<string, '*' | string[]>;
|
|
16
|
-
disabled: boolean;
|
|
17
|
-
readonly: boolean;
|
|
18
16
|
regions: string;
|
|
19
|
-
|
|
17
|
+
private __newCountry;
|
|
20
18
|
render(): TemplateResult;
|
|
21
19
|
private __addCountry;
|
|
22
20
|
}
|
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import { ScopedElementsMixin } from '@open-wc/scoped-elements';
|
|
2
2
|
import { html } from 'lit-html';
|
|
3
|
+
import { ConfigurableMixin } from "../../../mixins/configurable.js";
|
|
3
4
|
import { CountryCard } from "./CountryCard.js";
|
|
4
5
|
import { NucleonElement } from "../NucleonElement/NucleonElement.js";
|
|
5
6
|
import { ThemeableMixin } from "../../../mixins/themeable.js";
|
|
6
7
|
import { TranslatableMixin } from "../../../mixins/translatable.js";
|
|
7
8
|
import { classMap } from "../../../utils/class-map.js";
|
|
8
9
|
import { ifDefined } from 'lit-html/directives/if-defined';
|
|
9
|
-
const Base = ScopedElementsMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));
|
|
10
|
+
const Base = ScopedElementsMixin(ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement))));
|
|
10
11
|
export class CountriesList extends Base {
|
|
11
12
|
constructor() {
|
|
12
13
|
super(...arguments);
|
|
13
14
|
this.countries = {};
|
|
14
|
-
this.disabled = false;
|
|
15
|
-
this.readonly = false;
|
|
16
15
|
this.regions = '';
|
|
17
|
-
this.
|
|
16
|
+
this.__newCountry = '';
|
|
18
17
|
}
|
|
19
18
|
static get scopedElements() {
|
|
20
19
|
return {
|
|
@@ -25,18 +24,16 @@ export class CountriesList extends Base {
|
|
|
25
24
|
static get properties() {
|
|
26
25
|
return {
|
|
27
26
|
...super.properties,
|
|
27
|
+
__newCountry: { attribute: false },
|
|
28
28
|
countries: { type: Object },
|
|
29
|
-
disabled: { type: Boolean },
|
|
30
|
-
readonly: { type: Boolean },
|
|
31
29
|
regions: { type: String },
|
|
32
|
-
country: { type: String },
|
|
33
30
|
};
|
|
34
31
|
}
|
|
35
32
|
render() {
|
|
36
33
|
var _a, _b;
|
|
37
34
|
return html `
|
|
38
35
|
<div>
|
|
39
|
-
<div class="space-y-s">
|
|
36
|
+
<div class="space-y-s" data-testid="countries">
|
|
40
37
|
${Object.entries(this.countries).map(([country, regions]) => {
|
|
41
38
|
var _a, _b;
|
|
42
39
|
let regionsLink;
|
|
@@ -77,6 +74,7 @@ export class CountriesList extends Base {
|
|
|
77
74
|
})}
|
|
78
75
|
|
|
79
76
|
<div
|
|
77
|
+
data-testid="new-country"
|
|
80
78
|
class=${classMap({
|
|
81
79
|
'h-m flex items-center rounded transition-colors': true,
|
|
82
80
|
'border border-contrast-10 ring-primary-50': true,
|
|
@@ -90,30 +88,31 @@ export class CountriesList extends Base {
|
|
|
90
88
|
placeholder=${this.t('add_country')}
|
|
91
89
|
class="w-full bg-transparent appearance-none h-m text-s px-m focus-outline-none"
|
|
92
90
|
list="list"
|
|
93
|
-
.value=${this.
|
|
91
|
+
.value=${this.__newCountry}
|
|
94
92
|
?disabled=${this.disabled}
|
|
95
93
|
?readonly=${this.readonly}
|
|
96
94
|
@keydown=${(evt) => {
|
|
97
|
-
if (evt.key === 'Enter' && this.
|
|
95
|
+
if (evt.key === 'Enter' && this.__newCountry)
|
|
98
96
|
this.__addCountry();
|
|
99
97
|
}}
|
|
100
98
|
@input=${(evt) => {
|
|
101
99
|
const target = evt.currentTarget;
|
|
102
|
-
this.
|
|
100
|
+
this.__newCountry = target.value;
|
|
103
101
|
}}
|
|
104
102
|
/>
|
|
105
103
|
|
|
106
104
|
<button
|
|
105
|
+
aria-label=${this.t('create')}
|
|
107
106
|
class=${classMap({
|
|
108
107
|
'mr-xs flex-shrink-0': true,
|
|
109
108
|
'flex items-center justify-center rounded-full transition-colors': true,
|
|
110
|
-
'bg-contrast-5 text-disabled cursor-default': !this.
|
|
111
|
-
'bg-success-10 text-success cursor-pointer': !!this.
|
|
112
|
-
'hover-bg-success hover-text-success-contrast': !!this.
|
|
113
|
-
'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.
|
|
109
|
+
'bg-contrast-5 text-disabled cursor-default': !this.__newCountry,
|
|
110
|
+
'bg-success-10 text-success cursor-pointer': !!this.__newCountry,
|
|
111
|
+
'hover-bg-success hover-text-success-contrast': !!this.__newCountry,
|
|
112
|
+
'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.__newCountry,
|
|
114
113
|
})}
|
|
115
114
|
style="width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)"
|
|
116
|
-
?disabled=${!this.
|
|
115
|
+
?disabled=${!this.__newCountry || this.disabled}
|
|
117
116
|
@click=${this.__addCountry}
|
|
118
117
|
>
|
|
119
118
|
<iron-icon icon="icons:add" class="icon-inline text-m"></iron-icon>
|
|
@@ -122,16 +121,16 @@ export class CountriesList extends Base {
|
|
|
122
121
|
</div>
|
|
123
122
|
|
|
124
123
|
<datalist id="list">
|
|
125
|
-
${Object.
|
|
126
|
-
return html `<option value=${
|
|
124
|
+
${Object.entries((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : {}).map(([code, country]) => {
|
|
125
|
+
return html `<option value=${code}>${country.default}</option>`;
|
|
127
126
|
})}
|
|
128
127
|
</datalist>
|
|
129
128
|
</div>
|
|
130
129
|
`;
|
|
131
130
|
}
|
|
132
131
|
__addCountry() {
|
|
133
|
-
this.countries = { ...this.countries, [this.
|
|
134
|
-
this.
|
|
132
|
+
this.countries = { ...this.countries, [this.__newCountry]: '*' };
|
|
133
|
+
this.__newCountry = '';
|
|
135
134
|
this.dispatchEvent(new CustomEvent('update:countries'));
|
|
136
135
|
}
|
|
137
136
|
}
|
|
@@ -1 +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;
|
|
1
|
+
{"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"]}
|
|
@@ -10,12 +10,10 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
|
|
|
10
10
|
} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
|
|
11
11
|
export declare class CountryCard extends Base<Resource<Rels.Regions>> {
|
|
12
12
|
static get properties(): PropertyDeclarations;
|
|
13
|
-
disabled: boolean;
|
|
14
|
-
readonly: boolean;
|
|
15
13
|
regions: string[];
|
|
16
|
-
region: string;
|
|
17
14
|
name: string;
|
|
18
15
|
code: string;
|
|
16
|
+
private __newRegion;
|
|
19
17
|
render(): TemplateResult;
|
|
20
18
|
private __addRegion;
|
|
21
19
|
}
|
|
@@ -8,20 +8,16 @@ const Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement))
|
|
|
8
8
|
export class CountryCard extends Base {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments);
|
|
11
|
-
this.disabled = false;
|
|
12
|
-
this.readonly = false;
|
|
13
11
|
this.regions = [];
|
|
14
|
-
this.region = '';
|
|
15
12
|
this.name = '';
|
|
16
13
|
this.code = '';
|
|
14
|
+
this.__newRegion = '';
|
|
17
15
|
}
|
|
18
16
|
static get properties() {
|
|
19
17
|
return {
|
|
20
18
|
...super.properties,
|
|
21
|
-
|
|
22
|
-
readonly: { type: Boolean },
|
|
19
|
+
__newRegion: { attribute: false },
|
|
23
20
|
regions: { type: Array },
|
|
24
|
-
region: { type: String },
|
|
25
21
|
name: { type: String },
|
|
26
22
|
code: { type: String },
|
|
27
23
|
};
|
|
@@ -35,13 +31,17 @@ export class CountryCard extends Base {
|
|
|
35
31
|
'text-disabled': this.disabled,
|
|
36
32
|
})}
|
|
37
33
|
>
|
|
38
|
-
<div
|
|
34
|
+
<div
|
|
35
|
+
data-testid="country"
|
|
36
|
+
class="h-m flex justify-between items-center border-b border-contrast-10"
|
|
37
|
+
>
|
|
39
38
|
<div class="ml-m">
|
|
40
39
|
<span>${this.name || this.code}</span>
|
|
41
40
|
${this.name ? html `<span class="text-secondary">${this.code}</span>` : ''}
|
|
42
41
|
</div>
|
|
43
42
|
|
|
44
43
|
<button
|
|
44
|
+
aria-label=${this.t('delete')}
|
|
45
45
|
class=${classMap({
|
|
46
46
|
'mr-xs items-center justify-center rounded-full transition-colors': true,
|
|
47
47
|
'hover-bg-error-10 hover-text-error': !this.disabled,
|
|
@@ -58,7 +58,7 @@ export class CountryCard extends Base {
|
|
|
58
58
|
</button>
|
|
59
59
|
</div>
|
|
60
60
|
|
|
61
|
-
<div class="flex flex-wrap p-xs">
|
|
61
|
+
<div data-testid="regions" class="flex flex-wrap p-xs">
|
|
62
62
|
${this.regions.map(region => {
|
|
63
63
|
var _a, _b;
|
|
64
64
|
const name = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.values[region]) === null || _b === void 0 ? void 0 : _b.default;
|
|
@@ -74,6 +74,7 @@ export class CountryCard extends Base {
|
|
|
74
74
|
</span>
|
|
75
75
|
|
|
76
76
|
<button
|
|
77
|
+
aria-label=${this.t('delete')}
|
|
77
78
|
class=${classMap({
|
|
78
79
|
'items-center justify-center rounded-full transition-colors': true,
|
|
79
80
|
'hover-bg-error-10 hover-text-error': !this.disabled,
|
|
@@ -96,6 +97,7 @@ export class CountryCard extends Base {
|
|
|
96
97
|
})}
|
|
97
98
|
|
|
98
99
|
<div
|
|
100
|
+
data-testid="new-region"
|
|
99
101
|
style="border-radius: var(--lumo-size-s)"
|
|
100
102
|
class=${classMap({
|
|
101
103
|
'h-s m-xs items-center transition-colors border border-contrast-10': true,
|
|
@@ -110,15 +112,16 @@ export class CountryCard extends Base {
|
|
|
110
112
|
class="bg-transparent appearance-none h-s text-s px-s focus-outline-none"
|
|
111
113
|
style="width: 8rem"
|
|
112
114
|
list="list"
|
|
113
|
-
.value=${this.
|
|
115
|
+
.value=${this.__newRegion}
|
|
114
116
|
?disabled=${this.disabled}
|
|
117
|
+
?readonly=${this.readonly}
|
|
115
118
|
@keydown=${(evt) => {
|
|
116
|
-
if (evt.key === 'Enter' && this.
|
|
119
|
+
if (evt.key === 'Enter' && this.__newRegion)
|
|
117
120
|
this.__addRegion();
|
|
118
121
|
}}
|
|
119
122
|
@input=${(evt) => {
|
|
120
123
|
const target = evt.currentTarget;
|
|
121
|
-
this.
|
|
124
|
+
this.__newRegion = target.value;
|
|
122
125
|
}}
|
|
123
126
|
/>
|
|
124
127
|
|
|
@@ -127,12 +130,12 @@ export class CountryCard extends Base {
|
|
|
127
130
|
class=${classMap({
|
|
128
131
|
'flex-shrink-0': true,
|
|
129
132
|
'flex items-center justify-center rounded-full transition-colors': true,
|
|
130
|
-
'bg-contrast-5 text-disabled cursor-default': !this.
|
|
131
|
-
'bg-success-10 text-success cursor-pointer': !!this.
|
|
132
|
-
'hover-bg-success hover-text-success-contrast': !!this.
|
|
133
|
-
'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.
|
|
133
|
+
'bg-contrast-5 text-disabled cursor-default': !this.__newRegion,
|
|
134
|
+
'bg-success-10 text-success cursor-pointer': !!this.__newRegion,
|
|
135
|
+
'hover-bg-success hover-text-success-contrast': !!this.__newRegion,
|
|
136
|
+
'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.__newRegion,
|
|
134
137
|
})}
|
|
135
|
-
?disabled=${!this.
|
|
138
|
+
?disabled=${this.disabled || !this.__newRegion}
|
|
136
139
|
@click=${this.__addRegion}
|
|
137
140
|
>
|
|
138
141
|
<iron-icon icon="icons:add" class="icon-inline text-m"></iron-icon>
|
|
@@ -149,8 +152,8 @@ export class CountryCard extends Base {
|
|
|
149
152
|
`;
|
|
150
153
|
}
|
|
151
154
|
__addRegion() {
|
|
152
|
-
this.regions = [...new Set([...this.regions, this.
|
|
153
|
-
this.
|
|
155
|
+
this.regions = [...new Set([...this.regions, this.__newRegion])];
|
|
156
|
+
this.__newRegion = '';
|
|
154
157
|
this.dispatchEvent(new CustomEvent('update:regions'));
|
|
155
158
|
}
|
|
156
159
|
}
|
|
@@ -1 +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 disabled: { type: Boolean },\n readonly: { type: Boolean },\n regions: { type: Array },\n region: { type: String },\n name: { type: String },\n code: { type: String },\n };\n }\n\n disabled = false;\n\n readonly = false;\n\n regions: string[] = [];\n\n region = '';\n\n name = '';\n\n code = '';\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 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=${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 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=${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 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.region}\n ?disabled=${this.disabled}\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"]}
|
|
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 __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"]}
|