npm - @foxy.io/elements - Versions diffs - 1.14.0-beta.5 → 1.14.0-beta.9 - Mend

@foxy.io/elements 1.14.0-beta.5 → 1.14.0-beta.9

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.

Files changed (90) hide show

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

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

@@ -10,6 +10,8 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
 } & 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;

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

@@ -8,6 +8,8 @@ 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 = '';
@@ -16,6 +18,8 @@ export class CountryCard extends Base {
     static get properties() {
         return {
             ...super.properties,
+            disabled: { type: Boolean },
+            readonly: { type: Boolean },
             regions: { type: Array },
             region: { type: String },
             name: { type: String },
@@ -25,7 +29,12 @@ export class CountryCard extends Base {
     render() {
         var _a, _b;
         return html `
-      <div class="border border-contrast-10 rounded text-s">
+      <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>
@@ -33,8 +42,16 @@ export class CountryCard extends Base {
           </div>
           <button
-            class="mr-xs flex items-center justify-center rounded-full transition-colors hover-bg-error-10 hover-text-error focus-outline-none focus-ring-2 focus-ring-inset focus-ring-error-50"
+            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>
@@ -57,8 +74,16 @@ export class CountryCard extends Base {
                 </span>
                 <button
-                  class="flex items-center justify-center rounded-full transition-colors hover-bg-error-10 hover-text-error focus-outline-none focus-ring-2 focus-ring-inset focus-ring-error-50"
+                  class=${classMap({
+                'items-center justify-center rounded-full transition-colors': true,
+                'hover-bg-error-10 hover-text-error': !this.disabled,
+                'focus-outline-none focus-ring-2 ring-inset ring-error-50': !this.disabled,
+                'cursor-default': this.disabled,
+                'flex': !this.readonly,
+                'hidden': this.readonly,
+            })}
                   style="width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)"
+                  ?disabled=${this.disabled}
                   @click=${() => {
                 this.regions = this.regions.filter(value => value !== region);
                 this.dispatchEvent(new CustomEvent('update:regions'));
@@ -71,8 +96,14 @@ export class CountryCard extends Base {
         })}
           <div
-            class="h-s m-xs flex items-center transition-colors border border-contrast-10 hover-border-contrast-40 focus-within-ring-1 focus-within-ring-primary-50 focus-within-border-primary-50"
             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')}
@@ -80,6 +111,7 @@ export class CountryCard extends Base {
               style="width: 8rem"
               list="list"
               .value=${this.region}
+              ?disabled=${this.disabled}
               @keydown=${(evt) => {
             if (evt.key === 'Enter' && this.region)
                 this.__addRegion();

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

	@@ -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 regions: { type: Array },\n region: { type: String },\n name: { type: String },\n code: { type: String },\n };\n }\n\n regions: string[] = [];\n\n region = '';\n\n name = '';\n\n code = '';\n\n render(): TemplateResult {\n return html`\n <div class=\"border border-contrast-10 rounded text-s\">\n <div class=\"h-m flex justify-between items-center border-b border-contrast-10\">\n <div class=\"ml-m\">\n <span>${this.name \|\| this.code}</span>\n ${this.name ? html`<span class=\"text-secondary\">${this.code}</span>` : ''}\n </div>\n\n <button\n class=\"mr-xs flex items-center justify-center rounded-full transition-colors hover-bg-error-10 hover-text-error focus-outline-none focus-ring-2 focus-ring-inset focus-ring-error-50\"\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n @click=${() => this.dispatchEvent(new CustomEvent('delete'))}\n >\n <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n\n <div class=\"flex flex-wrap p-xs\">\n ${this.regions.map(region => {\n const name = this.data?.values[region]?.default;\n const code = region;\n\n return html`\n <div\n class=\"flex items-center border border-contrast-10 h-s m-xs\"\n style=\"border-radius: var(--lumo-size-s)\"\n >\n <span class=\"mx-s\">\n <span>${name \|\| code}</span>\n ${name ? html`<span class=\"text-secondary\">${code}</span>` : ''}\n </span>\n\n <button\n class=\"flex items-center justify-center rounded-full transition-colors hover-bg-error-10 hover-text-error focus-outline-none focus-ring-2 focus-ring-inset focus-ring-error-50\"\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n @click=${() => {\n this.regions = this.regions.filter(value => value !== region);\n this.dispatchEvent(new CustomEvent('update:regions'));\n }}\n >\n <iron-icon icon=\"icons:close\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n `;\n })}\n\n <div\n class=\"h-s m-xs flex items-center transition-colors border border-contrast-10 hover-border-contrast-40 focus-within-ring-1 focus-within-ring-primary-50 focus-within-border-primary-50\"\n style=\"border-radius: var(--lumo-size-s)\"\n >\n <input\n placeholder=${this.t('add_region')}\n class=\"bg-transparent appearance-none h-s text-s px-s focus-outline-none\"\n style=\"width: 8rem\"\n list=\"list\"\n .value=${this.region}\n @keydown=${(evt: KeyboardEvent) => {\n if (evt.key === 'Enter' && this.region) this.__addRegion();\n }}\n @input=${(evt: InputEvent) => {\n const target = evt.currentTarget as HTMLInputElement;\n this.region = target.value;\n }}\n />\n\n <button\n style=\"width: calc(var(--lumo-size-s) - 2px); height: calc(var(--lumo-size-s) - 2px)\"\n class=${classMap({\n 'flex-shrink-0': true,\n 'flex items-center justify-center rounded-full transition-colors': true,\n 'bg-contrast-5 text-disabled cursor-default': !this.region,\n 'bg-success-10 text-success cursor-pointer': !!this.region,\n 'hover-bg-success hover-text-success-contrast': !!this.region,\n 'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.region,\n })}\n ?disabled=${!this.region}\n @click=${this.__addRegion}\n >\n <iron-icon icon=\"icons:add\" class=\"icon-inline text-m\"></iron-icon>\n </button>\n </div>\n\n <datalist id=\"list\">\n ${Object.values(this.data?.values ?? {}).map(region => {\n return html`<option value=${region.code}>${region.default}</option>`;\n })}\n </datalist>\n </div>\n </div>\n `;\n }\n\n private __addRegion() {\n this.regions = [...new Set([...this.regions, this.region])];\n this.region = '';\n this.dispatchEvent(new CustomEvent('update:regions'));\n }\n}\n"]}
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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Data } from './types';
+import { Data, Templates } from './types';
 import { ScopedElementsMap } from '@open-wc/scoped-elements';
 import { TemplateResult } from 'lit-html';
 import { NucleonElement } from '../NucleonElement/NucleonElement';
@@ -8,10 +8,64 @@ declare const Base: typeof NucleonElement & import("lit-element").Constructor<im
 } & {
     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;
@@ -19,11 +73,16 @@ export declare class TemplateConfigForm extends Base<Data> {
     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 {};