@foxy.io/elements 1.34.0-beta.2 → 1.34.0

package/dist/elements/public/TemplateConfigForm/{CountryCard.js → internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControlItem.js}

@@ -1,11 +1,11 @@
 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";
+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 {
+export class InternalTemplateConfigFormFilterValuesControlItem extends Base {
     constructor() {
         super(...arguments);
         this.regions = [];
@@ -27,15 +27,12 @@ export class CountryCard extends Base {
         return html `
       <div
         class=${classMap({
-            'border border-contrast-10 rounded text-s': true,
+            'border border-contrast-5 rounded-s font-medium overflow-hidden': true,
             'text-disabled': this.disabled,
         })}
       >
-        <div
-          data-testid="country"
-          class="h-m flex justify-between items-center border-b border-contrast-10"
-        >
-          <div class="ml-m">
+        <div data-testid="country" class="h-m flex justify-between items-center bg-contrast-5">
+          <div style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)">
             <span>${this.name || this.code}</span>
             ${this.name ? html `<span class="text-secondary">${this.code}</span>` : ''}
           </div>
@@ -58,16 +55,13 @@ export class CountryCard extends Base {
           </button>
         </div>
 
-        <div data-testid="regions" class="flex flex-wrap p-xs">
+        <div data-testid="regions" class="flex flex-wrap p-xs text-s">
           ${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)"
-              >
+              <div class="flex items-center rounded-s border border-contrast-10 h-s m-xs">
                 <span class="mx-s">
                   <span>${name || code}</span>
                   ${name ? html `<span class="text-secondary">${code}</span>` : ''}
@@ -76,9 +70,9 @@ export class CountryCard extends Base {
                 <button
                   aria-label=${this.t('delete')}
                   class=${classMap({
-                'items-center justify-center rounded-full transition-colors': true,
+                'items-center justify-center rounded-s 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,
+                'focus-outline-none focus-ring-2 ring-inset ring-primary-50': !this.disabled,
                 'cursor-default': this.disabled,
                 'flex': !this.readonly,
                 'hidden': this.readonly,
@@ -98,10 +92,8 @@ export class CountryCard extends Base {
 
           <div
             data-testid="new-region"
-            style="border-radius: var(--lumo-size-s)"
             class=${classMap({
-            'h-s m-xs items-center transition-colors border border-contrast-10': true,
-            'hover-border-contrast-40': !this.disabled,
+            'h-s m-xs items-center transition-colors border border-contrast-10 rounded-s': true,
             'focus-within-ring-1 ring-primary-50 focus-within-border-primary-50': !this.disabled,
             'flex': !this.readonly,
             'hidden': this.readonly,
@@ -109,7 +101,7 @@ export class CountryCard extends Base {
           >
             <input
               placeholder=${this.t('add_region')}
-              class="bg-transparent appearance-none h-s text-s px-s focus-outline-none"
+              class="bg-transparent appearance-none h-s text-s px-s font-medium focus-outline-none"
               style="width: 8rem"
               list="list"
               .value=${this.__newRegion}
@@ -129,11 +121,11 @@ export class CountryCard extends Base {
               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.__newRegion,
-            'bg-success-10 text-success cursor-pointer': !!this.__newRegion,
+            'flex items-center justify-center rounded-s transition-colors': true,
+            'text-transparent cursor-default': !this.__newRegion,
+            'bg-contrast-5 text-body cursor-pointer': !!this.__newRegion,
             'hover-bg-success hover-text-success-contrast': !!this.__newRegion,
-            'focus-outline-none focus-ring-2 ring-inset ring-success-50': !!this.__newRegion,
+            'focus-outline-none focus-ring-2 ring-inset ring-primary-50': !!this.__newRegion,
         })}
               ?disabled=${this.disabled || !this.__newRegion}
               @click=${this.__addRegion}
@@ -157,4 +149,4 @@ export class CountryCard extends Base {
         this.dispatchEvent(new CustomEvent('update:regions'));
     }
 }
-//# sourceMappingURL=CountryCard.js.map
+//# sourceMappingURL=InternalTemplateConfigFormFilterValuesControlItem.js.map

package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControlItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalTemplateConfigFormFilterValuesControlItem.js","sourceRoot":"","sources":["../../../../../../src/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/InternalTemplateConfigFormFilterValuesControlItem.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 InternalTemplateConfigFormFilterValuesControlItem extends Base<\n  Resource<Rels.Regions>\n> {\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-5 rounded-s font-medium overflow-hidden': true,\n          'text-disabled': this.disabled,\n        })}\n      >\n        <div data-testid=\"country\" class=\"h-m flex justify-between items-center bg-contrast-5\">\n          <div style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\">\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 text-s\">\n          ${this.regions.map(region => {\n            const name = this.data?.values[region]?.default;\n            const code = region;\n\n            return html`\n              <div class=\"flex items-center rounded-s border border-contrast-10 h-s m-xs\">\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-s transition-colors': true,\n                    'hover-bg-error-10 hover-text-error': !this.disabled,\n                    'focus-outline-none focus-ring-2 ring-inset ring-primary-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            class=${classMap({\n              'h-s m-xs items-center transition-colors border border-contrast-10 rounded-s': true,\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 font-medium 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-s transition-colors': true,\n                'text-transparent cursor-default': !this.__newRegion,\n                'bg-contrast-5 text-body cursor-pointer': !!this.__newRegion,\n                'hover-bg-success hover-text-success-contrast': !!this.__newRegion,\n                'focus-outline-none focus-ring-2 ring-inset ring-primary-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"]}

package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/index.d.ts

@@ -0,0 +1,4 @@
+import '../../../../internal/InternalEditableControl/index';
+import '../../../NucleonElement/index';
+import { InternalTemplateConfigFormFilterValuesControl } from './InternalTemplateConfigFormFilterValuesControl';
+export { InternalTemplateConfigFormFilterValuesControl };

package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/index.js

@@ -0,0 +1,8 @@
+import "../../../../internal/InternalEditableControl/index.js";
+import "../../../NucleonElement/index.js";
+import { InternalTemplateConfigFormFilterValuesControlItem } from "./InternalTemplateConfigFormFilterValuesControlItem.js";
+import { InternalTemplateConfigFormFilterValuesControl } from "./InternalTemplateConfigFormFilterValuesControl.js";
+customElements.define('foxy-internal-template-config-form-filter-values-control-item', InternalTemplateConfigFormFilterValuesControlItem);
+customElements.define('foxy-internal-template-config-form-filter-values-control', InternalTemplateConfigFormFilterValuesControl);
+export { InternalTemplateConfigFormFilterValuesControl };
+//# sourceMappingURL=index.js.map

package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormFilterValuesControl/index.ts"],"names":[],"mappings":"AAAA,+DAA4D;AAC5D,0CAAuC;AAEvC,OAAO,EAAE,iDAAiD,EAAE,+DAA4D;AACxH,OAAO,EAAE,6CAA6C,EAAE,2DAAwD;AAEhH,cAAc,CAAC,MAAM,CACnB,+DAA+D,EAC/D,iDAAiD,CAClD,CAAC;AAEF,cAAc,CAAC,MAAM,CACnB,0DAA0D,EAC1D,6CAA6C,CAC9C,CAAC;AAEF,OAAO,EAAE,6CAA6C,EAAE,CAAC","sourcesContent":["import '../../../../internal/InternalEditableControl/index';\nimport '../../../NucleonElement/index';\n\nimport { InternalTemplateConfigFormFilterValuesControlItem } from './InternalTemplateConfigFormFilterValuesControlItem';\nimport { InternalTemplateConfigFormFilterValuesControl } from './InternalTemplateConfigFormFilterValuesControl';\n\ncustomElements.define(\n  'foxy-internal-template-config-form-filter-values-control-item',\n  InternalTemplateConfigFormFilterValuesControlItem\n);\n\ncustomElements.define(\n  'foxy-internal-template-config-form-filter-values-control',\n  InternalTemplateConfigFormFilterValuesControl\n);\n\nexport { InternalTemplateConfigFormFilterValuesControl };\n"]}

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

@@ -0,0 +1,7 @@
+import type { TemplateResult } from 'lit-html';
+import { InternalEditableControl } from '../../../../internal/InternalEditableControl/InternalEditableControl';
+export declare class InternalTemplateConfigFormSupportedCardsControl extends InternalEditableControl {
+    renderControl(): TemplateResult;
+    protected get _value(): string[];
+    protected set _value(value: string[]);
+}

package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormSupportedCardsControl/InternalTemplateConfigFormSupportedCardsControl.js

@@ -0,0 +1,82 @@
+import * as logos from "../../../PaymentMethodCard/logos.js";
+import { InternalEditableControl } from "../../../../internal/InternalEditableControl/InternalEditableControl.js";
+import { classMap } from "../../../../../utils/class-map.js";
+import { html } from 'lit-html';
+export class InternalTemplateConfigFormSupportedCardsControl extends InternalEditableControl {
+    renderControl() {
+        const typeToName = {
+            amex: 'American Express',
+            diners: 'Diners Club',
+            discover: 'Discover',
+            jcb: 'JCB',
+            maestro: 'Maestro',
+            mastercard: 'Mastercard',
+            unionpay: 'UnionPay',
+            visa: 'Visa',
+        };
+        return html `
+      <div class="flex flex-wrap -m-xs">
+        ${Object.entries(logos).map(([type, logo]) => {
+            if (!typeToName[type])
+                return;
+            const isChecked = this._value.includes(type);
+            return html `
+            <div
+              data-testid=${type}
+              class=${classMap({
+                'm-xs rounded': true,
+                'opacity-50 cursor-default': this.disabled,
+                'cursor-pointer ring-primary-50 focus-within-ring-2': !this.disabled,
+            })}
+            >
+              <label
+                class=${classMap({
+                'overflow-hidden transition-colors flex rounded-s border': true,
+                'border-primary bg-primary-10 text-primary': isChecked && !this.readonly,
+                'border-contrast bg-contrast-5 text-secondary': isChecked && this.readonly,
+                'hover-text-body': isChecked && !this.disabled && !this.readonly,
+                'border-contrast-10': !isChecked,
+                'hover-border-primary': !isChecked && !this.disabled && !this.readonly,
+                'hover-text-primary': !isChecked && !this.disabled && !this.readonly,
+            })}
+              >
+                <div class="h-s">${logo}</div>
+
+                <div class="text-s font-medium mx-s my-auto leading-none">${typeToName[type]}</div>
+
+                <input
+                  type="checkbox"
+                  class="sr-only"
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  ?checked=${isChecked}
+                  @change=${(evt) => {
+                if (this.readonly)
+                    return evt.preventDefault();
+                evt.stopPropagation();
+                const newValue = [...this._value];
+                if (evt.currentTarget.checked) {
+                    newValue.push(type);
+                }
+                else {
+                    newValue.splice(newValue.indexOf(type), 1);
+                }
+                this._value = newValue;
+            }}
+                />
+              </label>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+    get _value() {
+        var _a;
+        return ((_a = super._value) !== null && _a !== void 0 ? _a : []);
+    }
+    set _value(value) {
+        super._value = value;
+    }
+}
+//# sourceMappingURL=InternalTemplateConfigFormSupportedCardsControl.js.map

package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormSupportedCardsControl/InternalTemplateConfigFormSupportedCardsControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalTemplateConfigFormSupportedCardsControl.js","sourceRoot":"","sources":["../../../../../../src/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormSupportedCardsControl/InternalTemplateConfigFormSupportedCardsControl.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,4CAAyC;AAE1D,OAAO,EAAE,uBAAuB,EAAE,gFAA6E;AAC/G,OAAO,EAAE,QAAQ,EAAE,0CAAuC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,+CAAgD,SAAQ,uBAAuB;IAC1F,aAAa;QACX,MAAM,UAAU,GAA2B;YACzC,IAAI,EAAE,kBAAkB;YACxB,MAAM,EAAE,aAAa;YACrB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,KAAK;YACV,OAAO,EAAE,SAAS;YAClB,UAAU,EAAE,YAAY;YACxB,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,MAAM;SACb,CAAC;QAEF,OAAO,IAAI,CAAA;;UAEL,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE;YAC3C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;gBAAE,OAAO;YAC9B,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAE7C,OAAO,IAAI,CAAA;;4BAEO,IAAI;sBACV,QAAQ,CAAC;gBACf,cAAc,EAAE,IAAI;gBACpB,2BAA2B,EAAE,IAAI,CAAC,QAAQ;gBAC1C,oDAAoD,EAAE,CAAC,IAAI,CAAC,QAAQ;aACrE,CAAC;;;wBAGQ,QAAQ,CAAC;gBACf,yDAAyD,EAAE,IAAI;gBAC/D,2CAA2C,EAAE,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACxE,8CAA8C,EAAE,SAAS,IAAI,IAAI,CAAC,QAAQ;gBAC1E,iBAAiB,EAAE,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAChE,oBAAoB,EAAE,CAAC,SAAS;gBAChC,sBAAsB,EAAE,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;gBACtE,oBAAoB,EAAE,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;aACrE,CAAC;;mCAEiB,IAAI;;4EAEqC,UAAU,CAAC,IAAI,CAAC;;;;;8BAK9D,IAAI,CAAC,QAAQ;8BACb,IAAI,CAAC,QAAQ;6BACd,SAAS;4BACV,CAAC,GAAU,EAAE,EAAE;gBACvB,IAAI,IAAI,CAAC,QAAQ;oBAAE,OAAO,GAAG,CAAC,cAAc,EAAE,CAAC;gBAE/C,GAAG,CAAC,eAAe,EAAE,CAAC;gBACtB,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;gBAElC,IAAK,GAAG,CAAC,aAAkC,CAAC,OAAO,EAAE;oBACnD,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBACrB;qBAAM;oBACL,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;iBAC5C;gBAED,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;YACzB,CAAC;;;;WAIR,CAAC;QACJ,CAAC,CAAC;;KAEL,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,OAAO,OAAC,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAa,CAAC;IAC1C,CAAC;IAED,IAAc,MAAM,CAAC,KAAe;QAClC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;IACvB,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\n\nimport * as logos from '../../../PaymentMethodCard/logos';\n\nimport { InternalEditableControl } from '../../../../internal/InternalEditableControl/InternalEditableControl';\nimport { classMap } from '../../../../../utils/class-map';\nimport { html } from 'lit-html';\n\nexport class InternalTemplateConfigFormSupportedCardsControl extends InternalEditableControl {\n  renderControl(): TemplateResult {\n    const typeToName: Record<string, string> = {\n      amex: 'American Express',\n      diners: 'Diners Club',\n      discover: 'Discover',\n      jcb: 'JCB',\n      maestro: 'Maestro',\n      mastercard: 'Mastercard',\n      unionpay: 'UnionPay',\n      visa: 'Visa',\n    };\n\n    return html`\n      <div class=\"flex flex-wrap -m-xs\">\n        ${Object.entries(logos).map(([type, logo]) => {\n          if (!typeToName[type]) return;\n          const isChecked = this._value.includes(type);\n\n          return html`\n            <div\n              data-testid=${type}\n              class=${classMap({\n                'm-xs rounded': true,\n                'opacity-50 cursor-default': this.disabled,\n                'cursor-pointer ring-primary-50 focus-within-ring-2': !this.disabled,\n              })}\n            >\n              <label\n                class=${classMap({\n                  'overflow-hidden transition-colors flex rounded-s border': true,\n                  'border-primary bg-primary-10 text-primary': isChecked && !this.readonly,\n                  'border-contrast bg-contrast-5 text-secondary': isChecked && this.readonly,\n                  'hover-text-body': isChecked && !this.disabled && !this.readonly,\n                  'border-contrast-10': !isChecked,\n                  'hover-border-primary': !isChecked && !this.disabled && !this.readonly,\n                  'hover-text-primary': !isChecked && !this.disabled && !this.readonly,\n                })}\n              >\n                <div class=\"h-s\">${logo}</div>\n\n                <div class=\"text-s font-medium mx-s my-auto leading-none\">${typeToName[type]}</div>\n\n                <input\n                  type=\"checkbox\"\n                  class=\"sr-only\"\n                  ?disabled=${this.disabled}\n                  ?readonly=${this.readonly}\n                  ?checked=${isChecked}\n                  @change=${(evt: Event) => {\n                    if (this.readonly) return evt.preventDefault();\n\n                    evt.stopPropagation();\n                    const newValue = [...this._value];\n\n                    if ((evt.currentTarget as HTMLInputElement).checked) {\n                      newValue.push(type);\n                    } else {\n                      newValue.splice(newValue.indexOf(type), 1);\n                    }\n\n                    this._value = newValue;\n                  }}\n                />\n              </label>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n\n  protected get _value(): string[] {\n    return (super._value ?? []) as string[];\n  }\n\n  protected set _value(value: string[]) {\n    super._value = value;\n  }\n}\n"]}

package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormSupportedCardsControl/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../internal/InternalEditableControl/index';
+import { InternalTemplateConfigFormSupportedCardsControl } from './InternalTemplateConfigFormSupportedCardsControl';
+export { InternalTemplateConfigFormSupportedCardsControl };

package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormSupportedCardsControl/index.js

@@ -0,0 +1,5 @@
+import "../../../../internal/InternalEditableControl/index.js";
+import { InternalTemplateConfigFormSupportedCardsControl } from "./InternalTemplateConfigFormSupportedCardsControl.js";
+customElements.define('foxy-internal-template-config-form-supported-cards-control', InternalTemplateConfigFormSupportedCardsControl);
+export { InternalTemplateConfigFormSupportedCardsControl };
+//# sourceMappingURL=index.js.map

package/dist/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormSupportedCardsControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/elements/public/TemplateConfigForm/internal/InternalTemplateConfigFormSupportedCardsControl/index.ts"],"names":[],"mappings":"AAAA,+DAA4D;AAE5D,OAAO,EAAE,+CAA+C,EAAE,6DAA0D;AAEpH,cAAc,CAAC,MAAM,CACnB,4DAA4D,EAC5D,+CAA+C,CAChD,CAAC;AAEF,OAAO,EAAE,+CAA+C,EAAE,CAAC","sourcesContent":["import '../../../../internal/InternalEditableControl/index';\n\nimport { InternalTemplateConfigFormSupportedCardsControl } from './InternalTemplateConfigFormSupportedCardsControl';\n\ncustomElements.define(\n  'foxy-internal-template-config-form-supported-cards-control',\n  InternalTemplateConfigFormSupportedCardsControl\n);\n\nexport { InternalTemplateConfigFormSupportedCardsControl };\n"]}

package/dist/mixins/themeable.js

@@ -537,6 +537,10 @@ input::-webkit-date-and-time-value{
   margin: var(--lumo-space-m, 1rem);
 }
 
+.-m-xs {
+  margin: calc(var(--lumo-space-xs, 0.25rem) * -1);
+}
+
 .-m-s {
   margin: calc(var(--lumo-space-s, 0.5rem) * -1);
 }
@@ -690,10 +694,6 @@ input::-webkit-date-and-time-value{
   margin-bottom: calc(var(--lumo-space-xs, 0.25rem) * -1);
 }
 
-.-mb-s {
-  margin-bottom: calc(var(--lumo-space-s, 0.5rem) * -1);
-}
-
 .ml-auto {
   margin-left: auto;
 }
@@ -1585,10 +1585,6 @@ input::-webkit-date-and-time-value{
     border-color: var(--lumo-contrast-30pct, hsla(214, 50%, 22%, 0.26));
   }
 
-  .hover-border-contrast-40:hover {
-    border-color: var(--lumo-contrast-40pct, hsla(214, 47%, 21%, 0.38));
-  }
-
   .hover-border-primary-10:hover {
     border-color: var(--lumo-primary-color-10pct, hsla(214, 90%, 52%, 0.1));
   }
@@ -1822,10 +1818,6 @@ input::-webkit-date-and-time-value{
   padding-top: var(--lumo-space-m, 1rem);
 }
 
-.pr-xs {
-  padding-right: var(--lumo-space-xs, 0.25rem);
-}
-
 .pr-s {
   padding-right: var(--lumo-space-s, 0.5rem);
 }

package/dist/mixins/themeable.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeable.js","sourceRoot":"","sources":["../../src/mixins/themeable.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAEtE,OAAO,EAA0C,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,EAAE,eAAe,EAAE,wBAAqB;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAI/E,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAkB,EACkB,EAAE;IACtC,OAAO,MAAM,gBAAiB,SAAQ,WAAW;QAC/C,MAAM,KAAK,MAAM;YACf,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;YAEjC,OAAO;gBACL,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClF,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA+IF;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI;IACF,cAAc,CACZ,yBAAyB,EACzB,GAAG;;;;;;;;KASF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,eAAe,EACf,GAAG;;;KAIF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,uEAAuE;IACvE,cAAc,CACZ,aAAa,EACb,GAAG;;;KAIF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED;;;;;;;GAOG;AACH,MAAM,OAAgB,SAAU,SAAQ,mBAAmB,CACzD,eAAe,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAC5C;CAAG","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\nimport { CSSResult, CSSResultArray, Constructor, LitElement, css } from 'lit-element';\n\nimport { ResponsiveMixin } from './responsive';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\n\ntype Base = Constructor<LitElement> & { styles?: CSSResult | CSSResultArray | CSSStyleSheet };\n\nexport const ThemeableMixin = <TBase extends Base>(\n  BaseElement: TBase\n): TBase & { styles: CSSResultArray } => {\n  return class ThemeableElement extends BaseElement {\n    static get styles(): CSSResultArray {\n      const originalCSS = super.styles;\n\n      return [\n        ...(originalCSS ? (Array.isArray(originalCSS) ? originalCSS : [originalCSS]) : []),\n        css`\n          @tailwind base;\n\n          * {\n            -webkit-tap-highlight-color: transparent;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n          }\n\n          :host {\n            display: block;\n            color: var(--lumo-body-text-color);\n            line-height: var(--lumo-line-height-m);\n            font: normal var(--lumo-font-size-m) var(--lumo-font-family);\n          }\n\n          details > summary::-webkit-details-marker {\n            display: none;\n          }\n\n          details > summary {\n            list-style: none;\n          }\n\n          vaadin-select {\n            margin-top: -4px;\n            margin-bottom: -4px;\n          }\n\n          vaadin-text-area,\n          vaadin-text-field,\n          vaadin-date-picker,\n          vaadin-email-field,\n          vaadin-number-field,\n          vaadin-custom-field,\n          vaadin-integer-field,\n          vaadin-password-field,\n          vaadin-checkbox-group,\n          vaadin-radio-group,\n          vaadin-combo-box::part(text-field),\n          vaadin-date-picker::part(text-field) {\n            padding-top: 0;\n            padding-bottom: 0;\n          }\n\n          vaadin-text-area::part(label),\n          vaadin-text-field::part(label),\n          vaadin-date-picker::part(label),\n          vaadin-email-field::part(label),\n          vaadin-number-field::part(label),\n          vaadin-custom-field::part(label),\n          vaadin-integer-field::part(label),\n          vaadin-password-field::part(label),\n          vaadin-checkbox-group::part(label),\n          vaadin-radio-group::part(label),\n          vaadin-combo-box::part(label),\n          vaadin-date-picker::part(label) {\n            margin-left: 0;\n          }\n\n          vaadin-time-picker,\n          vaadin-date-time-picker {\n            width: 100%;\n          }\n\n          vaadin-button,\n          vaadin-checkbox::part(checkbox) {\n            margin: 0;\n          }\n\n          vaadin-checkbox::part(label) {\n            margin: 0.1875em var(--lumo-space-m);\n          }\n\n          .appearance-none {\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            appearance: none;\n          }\n\n          .appearance-none::-webkit-calendar-picker-indicator,\n          .appearance-none::-webkit-outer-spin-button,\n          .appearance-none::-webkit-inner-spin-button,\n          .appearance-none::-webkit-list-button {\n            opacity: 0 !important;\n            width: 0 !important;\n            margin: 0 !important;\n            padding: 0 !important;\n          }\n\n          input::-webkit-date-and-time-value {\n            text-align: inherit !important;\n          }\n\n          [hidden] {\n            display: none !important;\n          }\n\n          @tailwind components;\n\n          @tailwind utilities;\n\n          @layer utilities {\n            .border-radius-overflow-fix {\n              -webkit-mask-image: -webkit-radial-gradient(white, black);\n            }\n\n            @variants sm, md, lg, xl {\n              .grid-rows-auto {\n                grid-auto-rows: 1fr;\n              }\n\n              .icon-inline {\n                --iron-icon-height: 1em;\n                --iron-icon-width: 1em;\n              }\n\n              .bg-blurred {\n                backdrop-filter: blur(25px);\n                background: var(--lumo-tint-80pct);\n              }\n\n              .max-w-modal {\n                max-width: 28rem;\n              }\n\n              .max-w-modal-wide {\n                max-width: 50rem;\n              }\n\n              .w-narrow-modal {\n                width: 18rem;\n              }\n\n              .snap-x-mandatory {\n                scroll-snap-type: x mandatory;\n              }\n\n              .snap-start {\n                scroll-snap-align: start;\n              }\n            }\n          }\n        `,\n      ];\n    }\n  };\n};\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker',\n    css`\n      vaadin-date-time-picker-custom-field {\n        --lumo-text-field-size: auto;\n        padding: 0;\n      }\n\n      vaadin-date-time-picker-custom-field::part(label) {\n        padding-bottom: 0.5em;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker-date-picker',\n    css`\n      :host {\n        --lumo-text-field-size: auto;\n      }\n      vaadin-date-time-picker-date-text-field {\n        padding: 0;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker-time-picker',\n    css`\n      :host {\n        --lumo-text-field-size: auto;\n      }\n      vaadin-date-time-picker-time-text-field {\n        padding: 0;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-button',\n    css`\n      :host([theme~='primary']) {\n        font-weight: 500;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  /** https://github.com/vaadin-component-factory/vcf-tooltip/issues/6 */\n  registerStyles(\n    'vcf-tooltip',\n    css`\n      :host([hidden]) [part='container'] {\n        display: none !important;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\n/**\n * One of the base classes for each rel-specific element in the collection\n * providing shared TailwindCSS styles for Shadow DOM content.\n * This class MUST NOT be used on its own (hence the `abstract` keyword) or\n * referenced externally (outside of the package).\n *\n * @deprecated\n */\nexport abstract class Themeable extends ScopedElementsMixin(\n  ResponsiveMixin(ThemeableMixin(LitElement))\n) {}\n"]}
+{"version":3,"file":"themeable.js","sourceRoot":"","sources":["../../src/mixins/themeable.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAEtE,OAAO,EAA0C,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,EAAE,eAAe,EAAE,wBAAqB;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAI/E,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,WAAkB,EACkB,EAAE;IACtC,OAAO,MAAM,gBAAiB,SAAQ,WAAW;QAC/C,MAAM,KAAK,MAAM;YACf,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;YAEjC,OAAO;gBACL,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClF,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA+IF;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI;IACF,cAAc,CACZ,yBAAyB,EACzB,GAAG;;;;;;;;KASF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,qCAAqC,EACrC,GAAG;;;;;;;KAOF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,cAAc,CACZ,eAAe,EACf,GAAG;;;KAIF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED,IAAI;IACF,uEAAuE;IACvE,cAAc,CACZ,aAAa,EACb,GAAG;;;KAIF,CACF,CAAC;CACH;AAAC,WAAM;IACN,SAAS;CACV;AAED;;;;;;;GAOG;AACH,MAAM,OAAgB,SAAU,SAAQ,mBAAmB,CACzD,eAAe,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAC5C;CAAG","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\nimport { CSSResult, CSSResultArray, Constructor, LitElement, css } from 'lit-element';\n\nimport { ResponsiveMixin } from './responsive';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles';\n\ntype Base = Constructor<LitElement> & { styles?: CSSResult | CSSResultArray | CSSStyleSheet };\n\nexport const ThemeableMixin = <TBase extends Base>(\n  BaseElement: TBase\n): TBase & { styles: CSSResultArray } => {\n  return class ThemeableElement extends BaseElement {\n    static get styles(): CSSResultArray {\n      const originalCSS = super.styles;\n\n      return [\n        ...(originalCSS ? (Array.isArray(originalCSS) ? originalCSS : [originalCSS]) : []),\n        css`\n          @tailwind base;\n\n          * {\n            -webkit-tap-highlight-color: transparent;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n          }\n\n          :host {\n            display: block;\n            color: var(--lumo-body-text-color);\n            line-height: var(--lumo-line-height-m);\n            font: normal var(--lumo-font-size-m) var(--lumo-font-family);\n          }\n\n          details > summary::-webkit-details-marker {\n            display: none;\n          }\n\n          details > summary {\n            list-style: none;\n          }\n\n          vaadin-select {\n            margin-top: -4px;\n            margin-bottom: -4px;\n          }\n\n          vaadin-text-area,\n          vaadin-text-field,\n          vaadin-date-picker,\n          vaadin-email-field,\n          vaadin-number-field,\n          vaadin-custom-field,\n          vaadin-integer-field,\n          vaadin-password-field,\n          vaadin-checkbox-group,\n          vaadin-radio-group,\n          vaadin-combo-box::part(text-field),\n          vaadin-date-picker::part(text-field) {\n            padding-top: 0;\n            padding-bottom: 0;\n          }\n\n          vaadin-text-area::part(label),\n          vaadin-text-field::part(label),\n          vaadin-date-picker::part(label),\n          vaadin-email-field::part(label),\n          vaadin-number-field::part(label),\n          vaadin-custom-field::part(label),\n          vaadin-integer-field::part(label),\n          vaadin-password-field::part(label),\n          vaadin-checkbox-group::part(label),\n          vaadin-radio-group::part(label),\n          vaadin-combo-box::part(label),\n          vaadin-date-picker::part(label) {\n            margin-left: 0;\n          }\n\n          vaadin-time-picker,\n          vaadin-date-time-picker {\n            width: 100%;\n          }\n\n          vaadin-button,\n          vaadin-checkbox::part(checkbox) {\n            margin: 0;\n          }\n\n          vaadin-checkbox::part(label) {\n            margin: 0.1875em var(--lumo-space-m);\n          }\n\n          .appearance-none {\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            appearance: none;\n          }\n\n          .appearance-none::-webkit-calendar-picker-indicator,\n          .appearance-none::-webkit-outer-spin-button,\n          .appearance-none::-webkit-inner-spin-button,\n          .appearance-none::-webkit-list-button {\n            opacity: 0 !important;\n            width: 0 !important;\n            margin: 0 !important;\n            padding: 0 !important;\n          }\n\n          input::-webkit-date-and-time-value {\n            text-align: inherit !important;\n          }\n\n          [hidden] {\n            display: none !important;\n          }\n\n          @tailwind components;\n\n          @tailwind utilities;\n\n          @layer utilities {\n            .border-radius-overflow-fix {\n              -webkit-mask-image: -webkit-radial-gradient(white, black);\n            }\n\n            @variants sm, md, lg, xl {\n              .grid-rows-auto {\n                grid-auto-rows: 1fr;\n              }\n\n              .icon-inline {\n                --iron-icon-height: 1em;\n                --iron-icon-width: 1em;\n              }\n\n              .bg-blurred {\n                backdrop-filter: blur(25px);\n                background: var(--lumo-tint-80pct);\n              }\n\n              .max-w-modal {\n                max-width: 28rem;\n              }\n\n              .max-w-modal-wide {\n                max-width: 50rem;\n              }\n\n              .w-narrow-modal {\n                width: 18rem;\n              }\n\n              .snap-x-mandatory {\n                scroll-snap-type: x mandatory;\n              }\n\n              .snap-start {\n                scroll-snap-align: start;\n              }\n            }\n          }\n        `,\n      ];\n    }\n  };\n};\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker',\n    css`\n      vaadin-date-time-picker-custom-field {\n        --lumo-text-field-size: auto;\n        padding: 0;\n      }\n\n      vaadin-date-time-picker-custom-field::part(label) {\n        padding-bottom: 0.5em;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker-date-picker',\n    css`\n      :host {\n        --lumo-text-field-size: auto;\n      }\n      vaadin-date-time-picker-date-text-field {\n        padding: 0;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-date-time-picker-time-picker',\n    css`\n      :host {\n        --lumo-text-field-size: auto;\n      }\n      vaadin-date-time-picker-time-text-field {\n        padding: 0;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  registerStyles(\n    'vaadin-button',\n    css`\n      :host([theme~='primary']) {\n        font-weight: 500;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\ntry {\n  /** https://github.com/vaadin-component-factory/vcf-tooltip/issues/6 */\n  registerStyles(\n    'vcf-tooltip',\n    css`\n      :host([hidden]) [part='container'] {\n        display: none !important;\n      }\n    `\n  );\n} catch {\n  // ignore\n}\n\n/**\n * One of the base classes for each rel-specific element in the collection\n * providing shared TailwindCSS styles for Shadow DOM content.\n * This class MUST NOT be used on its own (hence the `abstract` keyword) or\n * referenced externally (outside of the package).\n *\n * @deprecated\n */\nexport abstract class Themeable extends ScopedElementsMixin(\n  ResponsiveMixin(ThemeableMixin(LitElement))\n) {}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foxy.io/elements",
   "type": "module",
-  "version": "1.34.0-beta.2",
+  "version": "1.34.0",
   "description": "E-commerce web components by Foxy.",
   "repository": {
     "type": "git",

package/dist/cdn/shared-1acbd965.js

@@ -1 +0,0 @@
-import{_ as r}from"./shared-d1195c27.js";import{p as s}from"./shared-0d4cdb19.js";function t(t){var n;const o=s(t),a=null!==(n={y:"yearly",m:"monthly",w:"weekly",d:"daily"}[o.units])&&void 0!==n?n:o.units;return r(r({},o),{},{units:a})}export{t as p};

package/dist/cdn/shared-61ade33e.js

@@ -1,6 +0,0 @@
-/**
-@license
-Copyright (c) 2017 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/
-let e=!1;window.addEventListener("keydown",(()=>{e=!0}),{capture:!0}),window.addEventListener("mousedown",(()=>{e=!1}),{capture:!0});const t=t=>class extends((e=>class extends e{static get properties(){var e={tabindex:{type:Number,value:0,reflectToAttribute:!0,observer:"_tabindexChanged"}};return window.ShadyDOM&&(e.tabIndex=e.tabindex),e}})(t)){static get properties(){return{autofocus:{type:Boolean},_previousTabIndex:{type:Number},disabled:{type:Boolean,observer:"_disabledChanged",reflectToAttribute:!0},_isShiftTabbing:{type:Boolean}}}get _keyboardActive(){return e}ready(){this.addEventListener("focusin",(e=>{e.composedPath()[0]===this?this.contains(e.relatedTarget)||this._focus():-1===e.composedPath().indexOf(this.focusElement)||this.disabled||this._setFocused(!0)})),this.addEventListener("focusout",(e=>this._setFocused(!1))),super.ready();const e=e=>{e.composed||e.target.dispatchEvent(new CustomEvent(e.type,{bubbles:!0,composed:!0,cancelable:!1}))};this.shadowRoot.addEventListener("focusin",e),this.shadowRoot.addEventListener("focusout",e),this.addEventListener("keydown",(e=>{if(!e.defaultPrevented&&9===e.keyCode)if(e.shiftKey)this._isShiftTabbing=!0,HTMLElement.prototype.focus.apply(this),this._setFocused(!1),setTimeout((()=>this._isShiftTabbing=!1),0);else{const e=window.navigator.userAgent.match(/Firefox\/(\d\d\.\d)/);if(e&&parseFloat(e[1])>=63&&parseFloat(e[1])<66&&this.parentNode&&this.nextSibling){const e=document.createElement("input");e.style.position="absolute",e.style.opacity="0",e.tabIndex=this.tabIndex,this.parentNode.insertBefore(e,this.nextSibling),e.focus(),e.addEventListener("focusout",(()=>this.parentNode.removeChild(e)))}}})),this.autofocus&&!this.disabled&&window.requestAnimationFrame((()=>{this._focus(),this._setFocused(!0),this.setAttribute("focus-ring","")}))}disconnectedCallback(){super.disconnectedCallback(),this.hasAttribute("focused")&&this._setFocused(!1)}_setFocused(t){t?this.setAttribute("focused",""):this.removeAttribute("focused"),t&&e?this.setAttribute("focus-ring",""):this.removeAttribute("focus-ring")}get focusElement(){return window.console.warn(`Please implement the 'focusElement' property in <${this.localName}>`),this}_focus(){this.focusElement&&!this._isShiftTabbing&&(this.focusElement.focus(),this._setFocused(!0))}focus(){this.focusElement&&!this.disabled&&(this.focusElement.focus(),this._setFocused(!0))}blur(){this.focusElement&&(this.focusElement.blur(),this._setFocused(!1))}_disabledChanged(e){this.focusElement.disabled=e,e?(this.blur(),this._previousTabIndex=this.tabindex,this.tabindex=-1,this.setAttribute("aria-disabled","true")):(void 0!==this._previousTabIndex&&(this.tabindex=this._previousTabIndex),this.removeAttribute("aria-disabled"))}_tabindexChanged(e){void 0!==e&&(this.focusElement.tabIndex=e),this.disabled&&this.tabindex&&(-1!==this.tabindex&&(this._previousTabIndex=this.tabindex),this.tabindex=e=void 0),window.ShadyDOM&&this.setProperties({tabIndex:e,tabindex:e})}click(){this.disabled||super.click()}};export{t as C};

package/dist/cdn/shared-684174e7.js

@@ -1 +0,0 @@
-import"./shared-51c4a6dd.js";import"./shared-0d4cdb19.js";import{_ as e}from"./shared-d1195c27.js";import{C as t}from"./shared-d1cb97c6.js";import{a as r,T as s,w as i}from"./shared-70612035.js";import{h as l,r as n,L as o}from"./shared-dc73b9a5.js";import{I as h}from"./shared-17a61265.js";import{N as a}from"./shared-e8b8c8d0.js";let p,u,_,d,c=e=>e;class f extends(t(r(s(h(o))))){constructor(){super(...arguments),this.nucleon=null}static get inferredProperties(){return[...super.inferredProperties,"nucleon"]}static get properties(){return e(e({},super.properties),{},{nucleon:{attribute:!1}})}inferFromElement(e,t){return"nucleon"===e&&t instanceof a?t:super.inferFromElement(e,t)}applyInferredProperties(e){var t,r;super.applyInferredProperties(e),this.nucleon=null!==(t=e.get("nucleon"))&&void 0!==t?t:null,!1===(null===(r=this.nucleon)||void 0===r?void 0:r.in("idle"))&&(this.disabled=!0)}renderLightDom(){if("string"!=typeof this.infer)return;const e=l(p||(p=c` <slot name="${0}:before" slot="before"></slot> <slot name="${0}:after" slot="after"></slot> `),this.infer,this.infer);n(e,this)}updated(e){super.updated(e),this.renderLightDom()}renderControl(){return l(u||(u=c``))}render(){return this.hidden?l(_||(_=c``)):l(d||(d=c` ${0} ${0} ${0} `),this.renderTemplateOrSlot("before",this.nucleon),this.renderControl(),this.renderTemplateOrSlot("after",this.nucleon))}}customElements.define("foxy-internal-control",f);class y extends f{constructor(){var e;super(...arguments),e=this,this.checkValidityAsync=null,this.getValue=()=>{var e;return null===(e=this.nucleon)||void 0===e?void 0:e.form[this.property]},this.setValue=e=>{var t;return null===(t=this.nucleon)||void 0===t?void 0:t.edit({[this.property]:e})},this.__debouncedCheckValidityAsync=i((async function(t){var r;const s=await(null===(r=e.checkValidityAsync)||void 0===r?void 0:r.call(e,t));e._value===t&&(e.__asyncError=!0===s?null:null!=s?s:null)}),300),this.__previousValue=null,this.__placeholder=null,this.__helperText=null,this.__asyncError=null,this.__v8nPrefix=null,this.__property=null,this.__label=null}static get properties(){return e(e({},super.properties),{},{checkValidityAsync:{attribute:!1},placeholder:{type:String,noAccessor:!0},helperText:{type:String,attribute:"helper-text",noAccessor:!0},v8nPrefix:{type:String,attribute:"v8n-prefix",noAccessor:!0},getValue:{attribute:!1},setValue:{attribute:!1},property:{type:String,noAccessor:!0},label:{type:String,noAccessor:!0},__asyncError:{attribute:!1}})}get placeholder(){return"string"==typeof this.__placeholder?this.__placeholder:this.t("placeholder")}set placeholder(e){this.requestUpdate("placeholder",this.__placeholder),this.__placeholder=e}get helperText(){return"string"==typeof this.__helperText?this.__helperText:this.t("helper_text")}set helperText(e){this.requestUpdate("helperText",this.__helperText),this.__helperText=e}get v8nPrefix(){return"string"==typeof this.__v8nPrefix?this.__v8nPrefix:"string"==typeof this.infer?`${this.infer}:`:""}set v8nPrefix(e){this.requestUpdate("v8nPrefix",this.__v8nPrefix),this.__v8nPrefix=e}get property(){return"string"==typeof this.__property?this.__property:"string"==typeof this.infer?this.infer.replace(/-/g,"_"):""}set property(e){this.requestUpdate("property",this.__property),this.__property=e}get label(){return"string"==typeof this.__label?this.__label:this.t("label")}set label(e){this.requestUpdate("label",this.__label),this.__label=e}resetPlaceholder(){this.requestUpdate("placeholder",this.__placeholder),this.__placeholder=null}resetHelperText(){this.requestUpdate("helperText",this.__helperText),this.__helperText=null}resetV8nPrefix(){this.requestUpdate("v8nPrefix",this.__v8nPrefix),this.__v8nPrefix=null}resetProperty(){this.requestUpdate("property",this.__property),this.__property=null}resetLabel(){this.requestUpdate("label",this.__label),this.__label=null}reportValidity(){const e=this.ownerDocument.createTreeWalker(this.renderRoot,NodeFilter.SHOW_ELEMENT);do{const t=e.currentNode,r=["reportValidity","validate"];for(const e of r)if(e in t)try{t[e]();break}catch(e){continue}}while(e.nextNode())}get _value(){return this.getValue()}set _value(e){this.__previousValue=this._value,this.__asyncError=null,this._error||this.__previousValue===e||this.__debouncedCheckValidityAsync(e);const t=new CustomEvent("change",{cancelable:!0,detail:e});this.dispatchEvent(t)&&this.setValue(e)}get _error(){var e,t;const r=null===(e=this.nucleon)||void 0===e?void 0:e.errors.find((e=>e.startsWith(this.v8nPrefix)));return null!==(t=null!=r?r:this.__asyncError)&&void 0!==t?t:void 0}get _errorMessage(){return this._error?this.t(this._error.substring(this.v8nPrefix.length)):void 0}get _checkValidity(){return()=>!this._error}}customElements.define("foxy-internal-editable-control",y);export{y as I,f as a};

package/dist/cdn/shared-8a65adfd.js

@@ -1 +0,0 @@
-import"./shared-66e2a4ee.js";import{I as e}from"./shared-684174e7.js";import"./shared-0d4cdb19.js";import{_ as t}from"./shared-d1195c27.js";import{h as s,s as i}from"./shared-dc73b9a5.js";import{c as r}from"./shared-4e709717.js";let l,o,a,h,c,n,d=e=>e;customElements.define("foxy-internal-switch-control",class extends e{constructor(){super(...arguments),this.helperTextAsToolip=!1,this.invert=!1}static get properties(){return t(t({},super.properties),{},{helperTextAsToolip:{type:Boolean,attribute:"helper-text-as-tooltip"},invert:{type:Boolean}})}renderControl(){const e=this.invert?!this._value:!!this._value;return s(l||(l=d` <div class="flex items-start gap-s leading-xs text-m"> <div class="flex-1"> <label class="text-m text-body" for="input">${0}</label> ${0} <p class="text-xs text-error" ?hidden="${0}"> ${0} </p> </div> ${0} ${0} </div> `),this.label,this.helperTextAsToolip?"":s(o||(o=d`<p class="text-xs text-secondary">${0}</p>`),this.helperText),this.disabled||this.readonly,this._errorMessage,this.readonly?s(a||(a=d`<p class="text-secondary">${0}</p>`),e?this.t("checked"):this.t("unchecked")):s(h||(h=d` <div style="height:calc(1em * var(--lumo-line-height-xs))" class="flex items-center"> <div style="border-radius:var(--lumo-size-xl);width:calc((1em * var(--lumo-line-height-xs)) - 3px + var(--lumo-space-m))" class="${0}" @click="${0}"> <div style="margin:1.5px;width:calc((1em * var(--lumo-line-height-xs)) - 6px);height:calc((1em * var(--lumo-line-height-xs)) - 6px)" class="${0}"></div> <input class="opacity-0 absolute inset-0 focus-outline-none" type="checkbox" id="input" switch ?disabled="${0}" ?readonly="${0}" ?checked="${0}" @change="${0}"> </div> </div> `),r({"cursor-pointer group transition-colors relative":!0,"flex flex-shrink-0 items-center":!0,"bg-success":!this.disabled&&e,"bg-contrast-20 hover-bg-contrast-30":!this.disabled&&!e,"bg-contrast-10":this.disabled,"focus-within-ring-2 focus-within-ring-primary-50":!0}),(()=>this._value=!this._value),r({"transition-all transform block rounded-full":!0,"translate-x-m":e,"translate-x-0":!e,"bg-base":this.disabled,"bg-tint":!this.disabled}),this.disabled,this.readonly,e,(e=>{const t=e.currentTarget;this._value=this.invert?!t.checked:t.checked})),this.helperTextAsToolip&&this.helperText?s(c||(c=d` <div class="transition-colors text-tertiary flex-shrink-0 cursor-pointer hover-text-body" id="trigger"> ${0} </div> <vcf-tooltip for="trigger" style="--lumo-base-color:black;max-width:30rem" class="mt-s" theme="light" position="bottom"> <span class="text-s" style="color:#fff">${0}</span> </vcf-tooltip> `),i(n||(n=d`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: calc(1em * var(--lumo-line-height-xs)); height: calc(1em * var(--lumo-line-height-xs)); margin-right: -0.12em"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg>`)),this.helperText):"")}});