@foxy.io/elements 1.14.0-beta.1 → 1.14.0-beta.10

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

@@ -0,0 +1,138 @@
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { html } from 'lit-html';
+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)));
+export class CountriesList extends Base {
+    constructor() {
+        super(...arguments);
+        this.countries = {};
+        this.disabled = false;
+        this.readonly = false;
+        this.regions = '';
+        this.country = '';
+    }
+    static get scopedElements() {
+        return {
+            'x-country-card': CountryCard,
+            'iron-icon': customElements.get('iron-icon'),
+        };
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            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">
+          ${Object.entries(this.countries).map(([country, regions]) => {
+            var _a, _b;
+            let regionsLink;
+            try {
+                const url = new URL(this.regions);
+                url.searchParams.set('country_code', country);
+                regionsLink = url.toString();
+            }
+            catch (_c) {
+                regionsLink = '';
+            }
+            return html `
+              <x-country-card
+                regions=${JSON.stringify(regions === '*' ? [] : regions)}
+                code=${country}
+                name=${ifDefined((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.values[country]) === null || _b === void 0 ? void 0 : _b.default)}
+                href=${regionsLink}
+                lang=${this.lang}
+                ns=${this.ns}
+                ?disabled=${this.disabled}
+                ?readonly=${this.readonly}
+                @update:regions=${(evt) => {
+                const newCountries = { ...this.countries };
+                const newRegions = evt.currentTarget.regions;
+                newCountries[country] = newRegions.length ? newRegions : '*';
+                this.countries = newCountries;
+                this.dispatchEvent(new CustomEvent('update:countries'));
+            }}
+                @delete=${() => {
+                const newCountries = { ...this.countries };
+                delete newCountries[country];
+                this.countries = newCountries;
+                this.dispatchEvent(new CustomEvent('update:countries'));
+            }}
+              >
+              </x-country-card>
+            `;
+        })}
+
+          <div
+            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}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
+              @keydown=${(evt) => {
+            if (evt.key === 'Enter' && this.country)
+                this.__addCountry();
+        }}
+              @input=${(evt) => {
+            const target = evt.currentTarget;
+            this.country = target.value;
+        }}
+            />
+
+            <button
+              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,
+        })}
+              style="width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)"
+              ?disabled=${!this.country || this.disabled}
+              @click=${this.__addCountry}
+            >
+              <iron-icon icon="icons:add" class="icon-inline text-m"></iron-icon>
+            </button>
+          </div>
+        </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>`;
+        })}
+        </datalist>
+      </div>
+    `;
+    }
+    __addCountry() {
+        this.countries = { ...this.countries, [this.country]: '*' };
+        this.country = '';
+        this.dispatchEvent(new CustomEvent('update:countries'));
+    }
+}
+//# sourceMappingURL=CountriesList.js.map

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

@@ -0,0 +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 { 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=${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.country}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\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 || 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.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"]}

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

@@ -0,0 +1,22 @@
+import { TemplateResult } from 'lit-html';
+import { NucleonElement } from '../NucleonElement/NucleonElement';
+import { PropertyDeclarations } from 'lit-element';
+import { Rels } from '@foxy.io/sdk/backend';
+import { Resource } from '@foxy.io/sdk/core';
+declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+} & {
+    styles: import("lit-element").CSSResultArray;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost>;
+export declare class CountryCard extends Base<Resource<Rels.Regions>> {
+    static get properties(): PropertyDeclarations;
+    disabled: boolean;
+    readonly: boolean;
+    regions: string[];
+    region: string;
+    name: string;
+    code: string;
+    render(): TemplateResult;
+    private __addRegion;
+}
+export {};

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

@@ -0,0 +1,157 @@
+import { html } from 'lit-html';
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import { ThemeableMixin } from "../../../mixins/themeable.js";
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { classMap } from "../../../utils/class-map.js";
+const Base = ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement)));
+export class CountryCard extends Base {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.readonly = false;
+        this.regions = [];
+        this.region = '';
+        this.name = '';
+        this.code = '';
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            disabled: { type: Boolean },
+            readonly: { type: Boolean },
+            regions: { type: Array },
+            region: { type: String },
+            name: { type: String },
+            code: { type: String },
+        };
+    }
+    render() {
+        var _a, _b;
+        return html `
+      <div
+        class=${classMap({
+            'border border-contrast-10 rounded text-s': true,
+            'text-disabled': this.disabled,
+        })}
+      >
+        <div 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=${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">
+          ${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;
+            const code = region;
+            return html `
+              <div
+                class="flex items-center border border-contrast-10 h-s m-xs"
+                style="border-radius: var(--lumo-size-s)"
+              >
+                <span class="mx-s">
+                  <span>${name || code}</span>
+                  ${name ? html `<span class="text-secondary">${code}</span>` : ''}
+                </span>
+
+                <button
+                  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'));
+            }}
+                >
+                  <iron-icon icon="icons:close" class="icon-inline text-m"></iron-icon>
+                </button>
+              </div>
+            `;
+        })}
+
+          <div
+            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}
+              ?disabled=${this.disabled}
+              @keydown=${(evt) => {
+            if (evt.key === 'Enter' && this.region)
+                this.__addRegion();
+        }}
+              @input=${(evt) => {
+            const target = evt.currentTarget;
+            this.region = target.value;
+        }}
+            />
+
+            <button
+              style="width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)"
+              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,
+        })}
+              ?disabled=${!this.region}
+              @click=${this.__addRegion}
+            >
+              <iron-icon icon="icons:add" class="icon-inline text-m"></iron-icon>
+            </button>
+          </div>
+
+          <datalist id="list">
+            ${Object.values((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : {}).map(region => {
+            return html `<option value=${region.code}>${region.default}</option>`;
+        })}
+          </datalist>
+        </div>
+      </div>
+    `;
+    }
+    __addRegion() {
+        this.regions = [...new Set([...this.regions, this.region])];
+        this.region = '';
+        this.dispatchEvent(new CustomEvent('update:regions'));
+    }
+}
+//# sourceMappingURL=CountryCard.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,88 @@
+import { Data, Templates } from './types';
+import { ScopedElementsMap } from '@open-wc/scoped-elements';
+import { TemplateResult } from 'lit-html';
+import { NucleonElement } from '../NucleonElement/NucleonElement';
+import { PropertyDeclarations } from 'lit-element';
+declare const Base: typeof NucleonElement & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+} & {
+    styles: import("lit-element").CSSResultArray;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/src/types").ScopedElementsHost>;
+/**
+ * Form element for creating or editing template configs (`fx:template_config`).
+ *
+ * @slot cart-type:before
+ * @slot cart-type:after
+ *
+ * @slot foxycomplete:before
+ * @slot foxycomplete:after
+ *
+ * @slot locations:before
+ * @slot locations:after
+ *
+ * @slot hidden-fields:before
+ * @slot hidden-fields:after
+ *
+ * @slot cards:before
+ * @slot cards:after
+ *
+ * @slot checkout-type:before
+ * @slot checkout-type:after
+ *
+ * @slot consent:before
+ * @slot consent:after
+ *
+ * @slot fields:before
+ * @slot fields:after
+ *
+ * @slot google-analytics:before
+ * @slot google-analytics:after
+ *
+ * @slot segment-io:before
+ * @slot segment-io:after
+ *
+ * @slot troubleshooting:before
+ * @slot troubleshooting:after
+ *
+ * @slot custom-config:before
+ * @slot custom-config:after
+ *
+ * @slot header:before
+ * @slot header:after
+ *
+ * @slot custom-fields:before
+ * @slot custom-fields:after
+ *
+ * @slot footer:before
+ * @slot footer:after
+ *
+ * @element foxy-template-config-form
+ * @since 1.14.0
+ */
+export declare class TemplateConfigForm extends Base<Data> {
+    static get scopedElements(): ScopedElementsMap;
+    static get properties(): PropertyDeclarations;
+    templates: Templates;
+    /** URI of the `fx:countries` hAPI resource. */
+    countries: string;
+    /** URI of the `fx:regions` hAPI resource. */
+    regions: string;
+    private __addHiddenFieldInputValue;
+    render(): TemplateResult;
+    private __renderCartType;
+    private __renderFoxycomplete;
+    private __renderLocations;
+    private __renderHiddenFields;
+    private __renderCards;
+    private __renderCheckoutType;
+    private __renderConsent;
+    private __renderFields;
+    private __renderGoogleAnalytics;
+    private __renderSegmentIo;
+    private __renderTroubleshooting;
+    private __renderCustomConfig;
+    private __renderHeader;
+    private __renderCustomFields;
+    private __renderFooter;
+}
+export {};