@foxy.io/elements 1.18.0-beta.20 → 1.18.0-beta.21

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

@@ -1,15 +1,35 @@
 import type { PropertyDeclarations } from 'lit-element';
 import type { TemplateResult } from 'lit-html';
 import type { Data } from './types';
-import { InternalCard } from '../../internal/InternalCard/InternalCard';
-declare const Base: typeof InternalCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+import { TwoLineCard } from '../CustomFieldCard/TwoLineCard';
+declare const Base: typeof TwoLineCard & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
 };
+/**
+ * Card element representing a `fx:payment_method` resource of Payments API.
+ *
+ * _Payments API is a client-side virtual API layer built on top of hAPI
+ * in an attempt to streamline access to stores' payment method settings
+ * that is currently a bit quirky due to the legacy functionality. To use
+ * this element with hAPI, wrap it into a foxy-payments-api node._
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-payments-api-payment-method-card
+ * @since 1.21.0
+ */
 export declare class PaymentsApiPaymentMethodCard extends Base<Data> {
     static get defaultImageSrc(): string;
     static get properties(): PropertyDeclarations;
-    paymentGatewaysHelper: string | null;
+    /**
+     * Payment method image/logo URL getter.
+     * If left `null`, the card will display the default image.
+     */
     getImageSrc: ((type: string) => string) | null;
-    renderBody(): TemplateResult;
+    render(): TemplateResult;
 }
 export {};

package/dist/elements/public/PaymentsApiPaymentMethodCard/PaymentsApiPaymentMethodCard.js

@@ -1,12 +1,32 @@
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
+import { TwoLineCard } from "../CustomFieldCard/TwoLineCard.js";
 import { html } from 'lit-html';
 const NS = 'payments-api-payment-method-card';
-const Base = TranslatableMixin(InternalCard, NS);
+const Base = TranslatableMixin(TwoLineCard, NS);
+/**
+ * Card element representing a `fx:payment_method` resource of Payments API.
+ *
+ * _Payments API is a client-side virtual API layer built on top of hAPI
+ * in an attempt to streamline access to stores' payment method settings
+ * that is currently a bit quirky due to the legacy functionality. To use
+ * this element with hAPI, wrap it into a foxy-payments-api node._
+ *
+ * @slot title:before
+ * @slot title:after
+ *
+ * @slot subtitle:before
+ * @slot subtitle:after
+ *
+ * @element foxy-payments-api-payment-method-card
+ * @since 1.21.0
+ */
 export class PaymentsApiPaymentMethodCard extends Base {
     constructor() {
         super(...arguments);
-        this.paymentGatewaysHelper = null;
+        /**
+         * Payment method image/logo URL getter.
+         * If left `null`, the card will display the default image.
+         */
         this.getImageSrc = null;
     }
     static get defaultImageSrc() {
@@ -15,16 +35,21 @@ export class PaymentsApiPaymentMethodCard extends Base {
     static get properties() {
         return {
             ...super.properties,
-            paymentGatewaysHelper: { type: String, attribute: 'payment-gateways-helper' },
             getImageSrc: { attribute: false },
         };
     }
-    renderBody() {
+    render() {
         var _a, _b;
+        const defaultLayout = super.render({
+            title: data => html `${data.helper.name}`,
+            subtitle: data => html `${data.description}`,
+        });
+        if (!this.in({ idle: 'snapshot' }))
+            return defaultLayout;
         const defaultSrc = PaymentsApiPaymentMethodCard.defaultImageSrc;
         const data = this.data;
         return html `
-      <figure class="flex items-center gap-m h-m">
+      <figure class="flex items-center gap-m">
         <img
           class="relative h-s w-s object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs"
           src=${(_b = (data ? (_a = this.getImageSrc) === null || _a === void 0 ? void 0 : _a.call(this, data.type) : null)) !== null && _b !== void 0 ? _b : defaultSrc}
@@ -32,21 +57,7 @@ export class PaymentsApiPaymentMethodCard extends Base {
           @error=${(evt) => (evt.currentTarget.src = defaultSrc)}
         />
 
-        <figcaption class="min-w-0 flex-1">
-          <dl class="flex justify-between gap-s">
-            <dt class="sr-only">${this.t('title_description')}</dt>
-            <dd class="font-semibold truncate flex-shrink-0">
-              ${data === null || data === void 0 ? void 0 : data.helper.name}&ZeroWidthSpace;
-            </dd>
-
-            ${(data === null || data === void 0 ? void 0 : data.helper.name) !== (data === null || data === void 0 ? void 0 : data.description)
-            ? html `
-                  <dt class="sr-only">${this.t('subtitle_description')}</dt>
-                  <dd class="truncate text-tertiary">${data === null || data === void 0 ? void 0 : data.description}</dd>
-                `
-            : ''}
-          </dl>
-        </figcaption>
+        <figcaption class="min-w-0 flex-1">${defaultLayout}</figcaption>
       </figure>
     `;
     }

package/dist/elements/public/PaymentsApiPaymentMethodCard/PaymentsApiPaymentMethodCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentsApiPaymentMethodCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodCard/PaymentsApiPaymentMethodCard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,kCAAkC,CAAC;AAC9C,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD,MAAM,OAAO,4BAA6B,SAAQ,IAAU;IAA5D;;QAaE,0BAAqB,GAAkB,IAAI,CAAC;QAE5C,gBAAW,GAAsC,IAAI,CAAC;IAiCxD,CAAC;IA/CC,MAAM,KAAK,eAAe;QACxB,OAAO,goBAAgoB,CAAC;IAC1oB,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,qBAAqB,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,yBAAyB,EAAE;YAC7E,WAAW,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAClC,CAAC;IACJ,CAAC;IAMD,UAAU;;QACR,MAAM,UAAU,GAAG,4BAA4B,CAAC,eAAe,CAAC;QAChE,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,OAAO,IAAI,CAAA;;;;gBAIC,MAAA,CAAC,IAAI,CAAC,CAAC,OAAC,IAAI,CAAC,WAAW,+CAAhB,IAAI,EAAe,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,mCAAI,UAAU;gBAC3D,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC;mBAChB,CAAC,GAAU,EAAE,EAAE,CAAC,CAAE,GAAG,CAAC,aAAkC,CAAC,GAAG,GAAG,UAAU,CAAC;;;;;kCAK3D,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC;;gBAE7C,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,IAAI;;;cAGnB,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,IAAI,OAAK,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,CAAA;YACvC,CAAC,CAAC,IAAI,CAAA;wCACoB,IAAI,CAAC,CAAC,CAAC,sBAAsB,CAAC;uDACf,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW;iBACvD;YACH,CAAC,CAAC,EAAE;;;;KAIb,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\n\nconst NS = 'payments-api-payment-method-card';\nconst Base = TranslatableMixin(InternalCard, NS);\n\nexport class PaymentsApiPaymentMethodCard extends Base<Data> {\n  static get defaultImageSrc(): string {\n    return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 44 44'%3E%3Cpath fill='%23fff' d='m29.3 14 14-14H32.1l-14 14h11.2Zm2.7 9.9 12-12V.7L30.62 14.1A2 2 0 0 1 32 16v7.9ZM13.31 44h11.18L44 24.5V13.3l-12 12V28a2 2 0 0 1-2 2h-2.69l-14 14Zm-1.41 0H.7l14-14h11.2l-14 14Zm14 0h11.2l6.9-6.9V25.9L25.9 44Zm12.6 0H44v-5.5L38.5 44Z'/%3E%3Cpath fill='%23fff' d='M30 28H14v-6h16v6Zm0-10v-2H14v2h16ZM0 43.3l13.4-13.4A2 2 0 0 1 12 28v-7.9L0 32.12V43.3Z'/%3E%3Cpath fill='%23fff' d='M16.7 14H14c-1.11 0-1.99.89-1.99 2v2.7L0 30.7V19.52L19.52 0H30.7l-14 14Zm1.4-14H6.92L0 6.92V18.1L18.1 0ZM5.5 0H0v5.5L5.5 0Z'/%3E%3C/svg%3E\";\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      paymentGatewaysHelper: { type: String, attribute: 'payment-gateways-helper' },\n      getImageSrc: { attribute: false },\n    };\n  }\n\n  paymentGatewaysHelper: string | null = null;\n\n  getImageSrc: ((type: string) => string) | null = null;\n\n  renderBody(): TemplateResult {\n    const defaultSrc = PaymentsApiPaymentMethodCard.defaultImageSrc;\n    const data = this.data;\n\n    return html`\n      <figure class=\"flex items-center gap-m h-m\">\n        <img\n          class=\"relative h-s w-s object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n          src=${(data ? this.getImageSrc?.(data.type) : null) ?? defaultSrc}\n          alt=${this.t('image_alt')}\n          @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n        />\n\n        <figcaption class=\"min-w-0 flex-1\">\n          <dl class=\"flex justify-between gap-s\">\n            <dt class=\"sr-only\">${this.t('title_description')}</dt>\n            <dd class=\"font-semibold truncate flex-shrink-0\">\n              ${data?.helper.name}&ZeroWidthSpace;\n            </dd>\n\n            ${data?.helper.name !== data?.description\n              ? html`\n                  <dt class=\"sr-only\">${this.t('subtitle_description')}</dt>\n                  <dd class=\"truncate text-tertiary\">${data?.description}</dd>\n                `\n              : ''}\n          </dl>\n        </figcaption>\n      </figure>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"PaymentsApiPaymentMethodCard.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodCard/PaymentsApiPaymentMethodCard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,WAAW,EAAE,0CAAuC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,kCAAkC,CAAC;AAC9C,MAAM,IAAI,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;AAEhD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,4BAA6B,SAAQ,IAAU;IAA5D;;QAYE;;;WAGG;QACH,gBAAW,GAAsC,IAAI,CAAC;IA0BxD,CAAC;IAzCC,MAAM,KAAK,eAAe;QACxB,OAAO,goBAAgoB,CAAC;IAC1oB,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,WAAW,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAClC,CAAC;IACJ,CAAC;IAQD,MAAM;;QACJ,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC;YACjC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YACxC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,EAAE;SAC5C,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,OAAO,aAAa,CAAC;QAEzD,MAAM,UAAU,GAAG,4BAA4B,CAAC,eAAe,CAAC;QAChE,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,OAAO,IAAI,CAAA;;;;gBAIC,MAAA,CAAC,IAAI,CAAC,CAAC,OAAC,IAAI,CAAC,WAAW,+CAAhB,IAAI,EAAe,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,mCAAI,UAAU;gBAC3D,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC;mBAChB,CAAC,GAAU,EAAE,EAAE,CAAC,CAAE,GAAG,CAAC,aAAkC,CAAC,GAAG,GAAG,UAAU,CAAC;;;6CAGhD,aAAa;;KAErD,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { TwoLineCard } from '../CustomFieldCard/TwoLineCard';\nimport { html } from 'lit-html';\n\nconst NS = 'payments-api-payment-method-card';\nconst Base = TranslatableMixin(TwoLineCard, NS);\n\n/**\n * Card element representing a `fx:payment_method` resource of Payments API.\n *\n * _Payments API is a client-side virtual API layer built on top of hAPI\n * in an attempt to streamline access to stores' payment method settings\n * that is currently a bit quirky due to the legacy functionality. To use\n * this element with hAPI, wrap it into a foxy-payments-api node._\n *\n * @slot title:before\n * @slot title:after\n *\n * @slot subtitle:before\n * @slot subtitle:after\n *\n * @element foxy-payments-api-payment-method-card\n * @since 1.21.0\n */\nexport class PaymentsApiPaymentMethodCard extends Base<Data> {\n  static get defaultImageSrc(): string {\n    return \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 44 44'%3E%3Cpath fill='%23fff' d='m29.3 14 14-14H32.1l-14 14h11.2Zm2.7 9.9 12-12V.7L30.62 14.1A2 2 0 0 1 32 16v7.9ZM13.31 44h11.18L44 24.5V13.3l-12 12V28a2 2 0 0 1-2 2h-2.69l-14 14Zm-1.41 0H.7l14-14h11.2l-14 14Zm14 0h11.2l6.9-6.9V25.9L25.9 44Zm12.6 0H44v-5.5L38.5 44Z'/%3E%3Cpath fill='%23fff' d='M30 28H14v-6h16v6Zm0-10v-2H14v2h16ZM0 43.3l13.4-13.4A2 2 0 0 1 12 28v-7.9L0 32.12V43.3Z'/%3E%3Cpath fill='%23fff' d='M16.7 14H14c-1.11 0-1.99.89-1.99 2v2.7L0 30.7V19.52L19.52 0H30.7l-14 14Zm1.4-14H6.92L0 6.92V18.1L18.1 0ZM5.5 0H0v5.5L5.5 0Z'/%3E%3C/svg%3E\";\n  }\n\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      getImageSrc: { attribute: false },\n    };\n  }\n\n  /**\n   * Payment method image/logo URL getter.\n   * If left `null`, the card will display the default image.\n   */\n  getImageSrc: ((type: string) => string) | null = null;\n\n  render(): TemplateResult {\n    const defaultLayout = super.render({\n      title: data => html`${data.helper.name}`,\n      subtitle: data => html`${data.description}`,\n    });\n\n    if (!this.in({ idle: 'snapshot' })) return defaultLayout;\n\n    const defaultSrc = PaymentsApiPaymentMethodCard.defaultImageSrc;\n    const data = this.data;\n\n    return html`\n      <figure class=\"flex items-center gap-m\">\n        <img\n          class=\"relative h-s w-s object-cover rounded-full bg-contrast-20 flex-shrink-0 shadow-xs\"\n          src=${(data ? this.getImageSrc?.(data.type) : null) ?? defaultSrc}\n          alt=${this.t('image_alt')}\n          @error=${(evt: Event) => ((evt.currentTarget as HTMLImageElement).src = defaultSrc)}\n        />\n\n        <figcaption class=\"min-w-0 flex-1\">${defaultLayout}</figcaption>\n      </figure>\n    `;\n  }\n}\n"]}

package/dist/elements/public/PaymentsApiPaymentMethodCard/index.d.ts

@@ -1,4 +1,5 @@
-import '../../internal/InternalCard/index';
+import '../../internal/InternalSandbox/index';
+import '../Spinner/index';
 import '../I18n/index';
 import { PaymentsApiPaymentMethodCard } from './PaymentsApiPaymentMethodCard';
 export { PaymentsApiPaymentMethodCard };

package/dist/elements/public/PaymentsApiPaymentMethodCard/index.js

@@ -1,4 +1,5 @@
-import "../../internal/InternalCard/index.js";
+import "../../internal/InternalSandbox/index.js";
+import "../Spinner/index.js";
 import "../I18n/index.js";
 import { PaymentsApiPaymentMethodCard } from "./PaymentsApiPaymentMethodCard.js";
 customElements.define('foxy-payments-api-payment-method-card', PaymentsApiPaymentMethodCard);

package/dist/elements/public/PaymentsApiPaymentMethodCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodCard/index.ts"],"names":[],"mappings":"AAAA,8CAA2C;AAE3C,0BAAuB;AAEvB,OAAO,EAAE,4BAA4B,EAAE,0CAAuC;AAE9E,cAAc,CAAC,MAAM,CAAC,uCAAuC,EAAE,4BAA4B,CAAC,CAAC;AAE7F,OAAO,EAAE,4BAA4B,EAAE,CAAC","sourcesContent":["import '../../internal/InternalCard/index';\n\nimport '../I18n/index';\n\nimport { PaymentsApiPaymentMethodCard } from './PaymentsApiPaymentMethodCard';\n\ncustomElements.define('foxy-payments-api-payment-method-card', PaymentsApiPaymentMethodCard);\n\nexport { PaymentsApiPaymentMethodCard };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/PaymentsApiPaymentMethodCard/index.ts"],"names":[],"mappings":"AAAA,iDAA8C;AAE9C,6BAA0B;AAC1B,0BAAuB;AAEvB,OAAO,EAAE,4BAA4B,EAAE,0CAAuC;AAE9E,cAAc,CAAC,MAAM,CAAC,uCAAuC,EAAE,4BAA4B,CAAC,CAAC;AAE7F,OAAO,EAAE,4BAA4B,EAAE,CAAC","sourcesContent":["import '../../internal/InternalSandbox/index';\n\nimport '../Spinner/index';\nimport '../I18n/index';\n\nimport { PaymentsApiPaymentMethodCard } from './PaymentsApiPaymentMethodCard';\n\ncustomElements.define('foxy-payments-api-payment-method-card', PaymentsApiPaymentMethodCard);\n\nexport { PaymentsApiPaymentMethodCard };\n"]}

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

@@ -10,7 +10,7 @@ declare const Base: typeof InternalForm & import("lit-element").Constructor<impo
  * Form element for creating and editing store shipping methods (`fx:store_shipping_method`).
  *
  * @element foxy-store-shipping-method-form
- * @since 1.18.0
+ * @since 1.21.0
  */
 export declare class StoreShippingMethodForm extends Base<Data> {
     static get properties(): typeof Base['properties'];

package/dist/elements/public/StoreShippingMethodForm/StoreShippingMethodForm.js

@@ -19,7 +19,7 @@ const isURL = (value) => {
  * Form element for creating and editing store shipping methods (`fx:store_shipping_method`).
  *
  * @element foxy-store-shipping-method-form
- * @since 1.18.0
+ * @since 1.21.0
  */
 export class StoreShippingMethodForm extends Base {
     constructor() {

package/dist/elements/public/StoreShippingMethodForm/StoreShippingMethodForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"StoreShippingMethodForm.js","sourceRoot":"","sources":["../../../../src/elements/public/StoreShippingMethodForm/StoreShippingMethodForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { InternalAsyncComboBoxControl } from '../../internal/InternalAsyncComboBoxControl/InternalAsyncComboBoxControl';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'store-shipping-method-form';\nconst Base = TranslatableMixin(InternalForm, NS);\nconst getKbSize = (value: string) => new Blob([value]).size / 1024;\nconst isURL = (value: string) => {\n  try {\n    new URL(value);\n    return true;\n  } catch {\n    return false;\n  }\n};\n\n/**\n * Form element for creating and editing store shipping methods (`fx:store_shipping_method`).\n *\n * @element foxy-store-shipping-method-form\n * @since 1.18.0\n */\nexport class StoreShippingMethodForm extends Base<Data> {\n  static get properties(): typeof Base['properties'] {\n    return {\n      ...super.properties,\n      shippingMethods: { type: String, attribute: 'shipping-methods' },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ shipping_method_uri: v }) => (v && isURL(v)) || 'shipping-method-uri:required',\n      ({ accountid: v }) => !v || v.length <= 50 || 'accountid:too_long',\n      ({ password: v }) => !v || v.length <= 50 || 'password:too_long',\n      ({ meter_number: v }) => !v || v.length <= 50 || 'meter-number:too_long',\n      ({ authentication_key: v }) => !v || v.length <= 50 || 'authentication-key:too_long',\n      ({ custom_code: v }) => !v || getKbSize(v) <= 64 || 'custom-code:too_long',\n\n      form => {\n        if (form._embedded?.['fx:shipping_method'].code === 'CUSTOM-ENDPOINT-POST') {\n          return (form.accountid && isURL(form.accountid)) || 'endpoint:required';\n        } else {\n          return true;\n        }\n      },\n\n      form => {\n        const url = form.shipping_container_uri;\n        const code = form._embedded?.['fx:shipping_method'].code;\n        const codes = ['USPS', 'FedEx', 'UPS'];\n\n        if (code && codes.includes(code)) {\n          return (url && isURL(url)) || 'shipping-container-uri:required';\n        } else {\n          return true;\n        }\n      },\n\n      form => {\n        const url = form.shipping_drop_type_uri;\n        const code = form._embedded?.['fx:shipping_method'].code;\n        const codes = ['FedEx', 'UPS'];\n\n        if (code && codes.includes(code)) {\n          return (url && isURL(url)) || 'shipping-drop-type-uri:required';\n        } else {\n          return true;\n        }\n      },\n    ];\n  }\n\n  shippingMethods: string | null = null;\n\n  private __destinations = [\n    { value: 'domestic', label: 'domestic' },\n    { value: 'international', label: 'international' },\n  ];\n\n  private __getDestinations = () => {\n    const value: string[] = [];\n    if (this.form.use_for_domestic) value.push('domestic');\n    if (this.form.use_for_international) value.push('international');\n    return value;\n  };\n\n  private __setDestinations = (newValue: string[]) => {\n    this.edit({\n      use_for_domestic: newValue.includes('domestic'),\n      use_for_international: newValue.includes('international'),\n    });\n  };\n\n  get hiddenSelector(): BooleanSelector {\n    const code = this.form._embedded?.['fx:shipping_method'].code;\n    if (!code) return new BooleanSelector('not=shipping-method-uri,timestamps,create,delete');\n\n    const orgControls = ['shipping-container-uri', 'shipping-drop-type-uri', 'destinations'];\n    const authControls = ['authentication-key', 'meter-number', 'accountid', 'password'];\n    const codeToControls: Record<string, string[]> = {\n      'CUSTOM-ENDPOINT-POST': ['endpoint'],\n      'CUSTOM-CODE': ['custom-code'],\n      'CUSTOM': ['destinations', 'services'],\n      'FedEx': [...orgControls, ...authControls, 'services'],\n      'USPS': [...orgControls, 'services'],\n      'UPS': [...orgControls, ...authControls, 'services'],\n    };\n\n    if (codeToControls[code]) {\n      const controls = codeToControls[code];\n      const set = ['shipping-method-uri', ...controls, 'timestamps', 'delete', 'create'];\n      return new BooleanSelector(`not=${set.join()} ${super.hiddenSelector}`);\n    } else {\n      return super.hiddenSelector;\n    }\n  }\n\n  renderBody(): TemplateResult {\n    const method = this.form._embedded?.['fx:shipping_method'];\n\n    return html`\n      ${['method', 'container', 'drop_type'].map(tgt => {\n        const curie = `fx:shipping_${tgt}` as keyof Data['_embedded'];\n        const prop = `shipping_${tgt}_uri` as keyof Data;\n\n        if (this.form._embedded?.[curie] || !this.form[prop]) return;\n\n        return html`\n          <foxy-nucleon\n            class=\"hidden\"\n            infer=\"\"\n            href=${this.form[prop]}\n            @update=${(evt: CustomEvent) => {\n              const loader = evt.currentTarget as NucleonElement<any>;\n              const data = loader.data;\n\n              if (data) {\n                const newEmbeds = { ...this.form._embedded, [curie]: data };\n                this.edit({ _embedded: newEmbeds as Data['_embedded'] });\n              }\n            }}\n          >\n          </foxy-nucleon>\n        `;\n      })}\n\n      <foxy-internal-async-combo-box-control\n        item-value-path=\"_links.self.href\"\n        item-label-path=\"name\"\n        first=${ifDefined(this.shippingMethods ?? this.form._links?.['fx:shipping_methods'].href)}\n        infer=\"shipping-method-uri\"\n        .selectedItem=${this.form._embedded?.['fx:shipping_method']}\n        @selected-item-changed=${(evt: CustomEvent) => {\n          const { selectedItem } = evt.currentTarget as InternalAsyncComboBoxControl;\n          const newEmbeds = { 'fx:shipping_method': selectedItem };\n\n          this.edit({\n            _embedded: newEmbeds as Data['_embedded'],\n            shipping_container_uri: '',\n            shipping_drop_type_uri: '',\n          });\n        }}\n      >\n      </foxy-internal-async-combo-box-control>\n\n      <foxy-internal-async-combo-box-control\n        item-value-path=\"_links.self.href\"\n        item-label-path=\"name\"\n        first=${ifDefined(method?._links['fx:shipping_containers'].href)}\n        infer=\"shipping-container-uri\"\n        .selectedItem=${this.form._embedded?.['fx:shipping_container']}\n        @selected-item-changed=${(evt: CustomEvent) => {\n          const { selectedItem } = evt.currentTarget as InternalAsyncComboBoxControl;\n          const newEmbeds = { ...this.form._embedded, 'fx:shipping_container': selectedItem };\n          this.edit({ _embedded: newEmbeds as Data['_embedded'] });\n        }}\n      >\n      </foxy-internal-async-combo-box-control>\n\n      <foxy-internal-async-combo-box-control\n        item-value-path=\"_links.self.href\"\n        item-label-path=\"name\"\n        first=${ifDefined(method?._links['fx:shipping_drop_types'].href)}\n        infer=\"shipping-drop-type-uri\"\n        .selectedItem=${this.form._embedded?.['fx:shipping_drop_type']}\n        @selected-item-changed=${(evt: CustomEvent) => {\n          const { selectedItem } = evt.currentTarget as InternalAsyncComboBoxControl;\n          const newEmbeds = { ...this.form._embedded, 'fx:shipping_drop_type': selectedItem };\n          this.edit({ _embedded: newEmbeds as Data['_embedded'] });\n        }}\n      >\n      </foxy-internal-async-combo-box-control>\n\n      <foxy-internal-checkbox-group-control\n        infer=\"destinations\"\n        .getValue=${this.__getDestinations}\n        .setValue=${this.__setDestinations}\n        .options=${this.__destinations}\n      >\n      </foxy-internal-checkbox-group-control>\n\n      <foxy-internal-text-control infer=\"authentication-key\"> </foxy-internal-text-control>\n      <foxy-internal-text-control infer=\"meter-number\"></foxy-internal-text-control>\n\n      <foxy-internal-text-control\n        infer=${method?.code === 'CUSTOM-ENDPOINT-POST' ? 'endpoint' : 'accountid'}\n        property=\"accountid\"\n      >\n      </foxy-internal-text-control>\n\n      <foxy-internal-text-control infer=\"password\"></foxy-internal-text-control>\n      <foxy-internal-text-area-control infer=\"custom-code\"></foxy-internal-text-area-control>\n\n      <foxy-internal-store-shipping-method-form-services-control infer=\"services\">\n      </foxy-internal-store-shipping-method-form-services-control>\n\n      ${super.renderBody()}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"StoreShippingMethodForm.js","sourceRoot":"","sources":["../../../../src/elements/public/StoreShippingMethodForm/StoreShippingMethodForm.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,4BAA4B,CAAC;AACxC,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AACjD,MAAM,SAAS,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC;AACnE,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,EAAE;IAC9B,IAAI;QACF,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC;QACf,OAAO,IAAI,CAAC;KACb;IAAC,WAAM;QACN,OAAO,KAAK,CAAC;KACd;AACH,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,OAAO,uBAAwB,SAAQ,IAAU;IAAvD;;QAmDE,oBAAe,GAAkB,IAAI,CAAC;QAE9B,mBAAc,GAAG;YACvB,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACxC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;SACnD,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,MAAM,KAAK,GAAa,EAAE,CAAC;YAC3B,IAAI,IAAI,CAAC,IAAI,CAAC,gBAAgB;gBAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACvD,IAAI,IAAI,CAAC,IAAI,CAAC,qBAAqB;gBAAE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YACjE,OAAO,KAAK,CAAC;QACf,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAC,QAAkB,EAAE,EAAE;YACjD,IAAI,CAAC,IAAI,CAAC;gBACR,gBAAgB,EAAE,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC;gBAC/C,qBAAqB,EAAE,QAAQ,CAAC,QAAQ,CAAC,eAAe,CAAC;aAC1D,CAAC,CAAC;QACL,CAAC,CAAC;IAgIJ,CAAC;IArMC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,eAAe,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE;SACjE,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,GAAG;QACZ,OAAO;YACL,CAAC,EAAE,mBAAmB,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,8BAA8B;YACjF,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,EAAE,IAAI,oBAAoB;YAClE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,EAAE,IAAI,mBAAmB;YAChE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,EAAE,IAAI,uBAAuB;YACxE,CAAC,EAAE,kBAAkB,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,EAAE,IAAI,6BAA6B;YACpF,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,sBAAsB;YAE1E,IAAI,CAAC,EAAE;;gBACL,IAAI,OAAA,IAAI,CAAC,SAAS,0CAAG,oBAAoB,EAAE,IAAI,MAAK,sBAAsB,EAAE;oBAC1E,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,mBAAmB,CAAC;iBACzE;qBAAM;oBACL,OAAO,IAAI,CAAC;iBACb;YACH,CAAC;YAED,IAAI,CAAC,EAAE;;gBACL,MAAM,GAAG,GAAG,IAAI,CAAC,sBAAsB,CAAC;gBACxC,MAAM,IAAI,SAAG,IAAI,CAAC,SAAS,0CAAG,oBAAoB,EAAE,IAAI,CAAC;gBACzD,MAAM,KAAK,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;gBAEvC,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;oBAChC,OAAO,CAAC,GAAG,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,iCAAiC,CAAC;iBACjE;qBAAM;oBACL,OAAO,IAAI,CAAC;iBACb;YACH,CAAC;YAED,IAAI,CAAC,EAAE;;gBACL,MAAM,GAAG,GAAG,IAAI,CAAC,sBAAsB,CAAC;gBACxC,MAAM,IAAI,SAAG,IAAI,CAAC,SAAS,0CAAG,oBAAoB,EAAE,IAAI,CAAC;gBACzD,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;gBAE/B,IAAI,IAAI,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;oBAChC,OAAO,CAAC,GAAG,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,iCAAiC,CAAC;iBACjE;qBAAM;oBACL,OAAO,IAAI,CAAC;iBACb;YACH,CAAC;SACF,CAAC;IACJ,CAAC;IAuBD,IAAI,cAAc;;QAChB,MAAM,IAAI,SAAG,IAAI,CAAC,IAAI,CAAC,SAAS,0CAAG,oBAAoB,EAAE,IAAI,CAAC;QAC9D,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,eAAe,CAAC,kDAAkD,CAAC,CAAC;QAE1F,MAAM,WAAW,GAAG,CAAC,wBAAwB,EAAE,wBAAwB,EAAE,cAAc,CAAC,CAAC;QACzF,MAAM,YAAY,GAAG,CAAC,oBAAoB,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC;QACrF,MAAM,cAAc,GAA6B;YAC/C,sBAAsB,EAAE,CAAC,UAAU,CAAC;YACpC,aAAa,EAAE,CAAC,aAAa,CAAC;YAC9B,QAAQ,EAAE,CAAC,cAAc,EAAE,UAAU,CAAC;YACtC,OAAO,EAAE,CAAC,GAAG,WAAW,EAAE,GAAG,YAAY,EAAE,UAAU,CAAC;YACtD,MAAM,EAAE,CAAC,GAAG,WAAW,EAAE,UAAU,CAAC;YACpC,KAAK,EAAE,CAAC,GAAG,WAAW,EAAE,GAAG,YAAY,EAAE,UAAU,CAAC;SACrD,CAAC;QAEF,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE;YACxB,MAAM,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;YACtC,MAAM,GAAG,GAAG,CAAC,qBAAqB,EAAE,GAAG,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;YACnF,OAAO,IAAI,eAAe,CAAC,OAAO,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC;SACzE;aAAM;YACL,OAAO,KAAK,CAAC,cAAc,CAAC;SAC7B;IACH,CAAC;IAED,UAAU;;QACR,MAAM,MAAM,SAAG,IAAI,CAAC,IAAI,CAAC,SAAS,0CAAG,oBAAoB,CAAC,CAAC;QAE3D,OAAO,IAAI,CAAA;QACP,CAAC,QAAQ,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;;YAC/C,MAAM,KAAK,GAAG,eAAe,GAAG,EAA6B,CAAC;YAC9D,MAAM,IAAI,GAAG,YAAY,GAAG,MAAoB,CAAC;YAEjD,IAAI,OAAA,IAAI,CAAC,IAAI,CAAC,SAAS,0CAAG,KAAK,MAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;gBAAE,OAAO;YAE7D,OAAO,IAAI,CAAA;;;;mBAIA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;sBACZ,CAAC,GAAgB,EAAE,EAAE;gBAC7B,MAAM,MAAM,GAAG,GAAG,CAAC,aAAoC,CAAC;gBACxD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;gBAEzB,IAAI,IAAI,EAAE;oBACR,MAAM,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;oBAC5D,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,SAA8B,EAAE,CAAC,CAAC;iBAC1D;YACH,CAAC;;;SAGJ,CAAC;QACJ,CAAC,CAAC;;;;;gBAKQ,SAAS,OAAC,IAAI,CAAC,eAAe,yCAAI,IAAI,CAAC,IAAI,CAAC,MAAM,0CAAG,qBAAqB,EAAE,IAAI,CAAC;;wBAEzE,MAAA,IAAI,CAAC,IAAI,CAAC,SAAS,0CAAG,oBAAoB,CAAC;iCAClC,CAAC,GAAgB,EAAE,EAAE;YAC5C,MAAM,EAAE,YAAY,EAAE,GAAG,GAAG,CAAC,aAA6C,CAAC;YAC3E,MAAM,SAAS,GAAG,EAAE,oBAAoB,EAAE,YAAY,EAAE,CAAC;YAEzD,IAAI,CAAC,IAAI,CAAC;gBACR,SAAS,EAAE,SAA8B;gBACzC,sBAAsB,EAAE,EAAE;gBAC1B,sBAAsB,EAAE,EAAE;aAC3B,CAAC,CAAC;QACL,CAAC;;;;;;;gBAOO,SAAS,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAC,wBAAwB,EAAE,IAAI,CAAC;;wBAEhD,MAAA,IAAI,CAAC,IAAI,CAAC,SAAS,0CAAG,uBAAuB,CAAC;iCACrC,CAAC,GAAgB,EAAE,EAAE;YAC5C,MAAM,EAAE,YAAY,EAAE,GAAG,GAAG,CAAC,aAA6C,CAAC;YAC3E,MAAM,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,uBAAuB,EAAE,YAAY,EAAE,CAAC;YACpF,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,SAA8B,EAAE,CAAC,CAAC;QAC3D,CAAC;;;;;;;gBAOO,SAAS,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAC,wBAAwB,EAAE,IAAI,CAAC;;wBAEhD,MAAA,IAAI,CAAC,IAAI,CAAC,SAAS,0CAAG,uBAAuB,CAAC;iCACrC,CAAC,GAAgB,EAAE,EAAE;YAC5C,MAAM,EAAE,YAAY,EAAE,GAAG,GAAG,CAAC,aAA6C,CAAC;YAC3E,MAAM,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,uBAAuB,EAAE,YAAY,EAAE,CAAC;YACpF,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,SAA8B,EAAE,CAAC,CAAC;QAC3D,CAAC;;;;;;oBAMW,IAAI,CAAC,iBAAiB;oBACtB,IAAI,CAAC,iBAAiB;mBACvB,IAAI,CAAC,cAAc;;;;;;;;gBAQtB,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,MAAK,sBAAsB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW;;;;;;;;;;;QAW1E,KAAK,CAAC,UAAU,EAAE;KACrB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { InternalAsyncComboBoxControl } from '../../internal/InternalAsyncComboBoxControl/InternalAsyncComboBoxControl';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'store-shipping-method-form';\nconst Base = TranslatableMixin(InternalForm, NS);\nconst getKbSize = (value: string) => new Blob([value]).size / 1024;\nconst isURL = (value: string) => {\n  try {\n    new URL(value);\n    return true;\n  } catch {\n    return false;\n  }\n};\n\n/**\n * Form element for creating and editing store shipping methods (`fx:store_shipping_method`).\n *\n * @element foxy-store-shipping-method-form\n * @since 1.21.0\n */\nexport class StoreShippingMethodForm extends Base<Data> {\n  static get properties(): typeof Base['properties'] {\n    return {\n      ...super.properties,\n      shippingMethods: { type: String, attribute: 'shipping-methods' },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ shipping_method_uri: v }) => (v && isURL(v)) || 'shipping-method-uri:required',\n      ({ accountid: v }) => !v || v.length <= 50 || 'accountid:too_long',\n      ({ password: v }) => !v || v.length <= 50 || 'password:too_long',\n      ({ meter_number: v }) => !v || v.length <= 50 || 'meter-number:too_long',\n      ({ authentication_key: v }) => !v || v.length <= 50 || 'authentication-key:too_long',\n      ({ custom_code: v }) => !v || getKbSize(v) <= 64 || 'custom-code:too_long',\n\n      form => {\n        if (form._embedded?.['fx:shipping_method'].code === 'CUSTOM-ENDPOINT-POST') {\n          return (form.accountid && isURL(form.accountid)) || 'endpoint:required';\n        } else {\n          return true;\n        }\n      },\n\n      form => {\n        const url = form.shipping_container_uri;\n        const code = form._embedded?.['fx:shipping_method'].code;\n        const codes = ['USPS', 'FedEx', 'UPS'];\n\n        if (code && codes.includes(code)) {\n          return (url && isURL(url)) || 'shipping-container-uri:required';\n        } else {\n          return true;\n        }\n      },\n\n      form => {\n        const url = form.shipping_drop_type_uri;\n        const code = form._embedded?.['fx:shipping_method'].code;\n        const codes = ['FedEx', 'UPS'];\n\n        if (code && codes.includes(code)) {\n          return (url && isURL(url)) || 'shipping-drop-type-uri:required';\n        } else {\n          return true;\n        }\n      },\n    ];\n  }\n\n  shippingMethods: string | null = null;\n\n  private __destinations = [\n    { value: 'domestic', label: 'domestic' },\n    { value: 'international', label: 'international' },\n  ];\n\n  private __getDestinations = () => {\n    const value: string[] = [];\n    if (this.form.use_for_domestic) value.push('domestic');\n    if (this.form.use_for_international) value.push('international');\n    return value;\n  };\n\n  private __setDestinations = (newValue: string[]) => {\n    this.edit({\n      use_for_domestic: newValue.includes('domestic'),\n      use_for_international: newValue.includes('international'),\n    });\n  };\n\n  get hiddenSelector(): BooleanSelector {\n    const code = this.form._embedded?.['fx:shipping_method'].code;\n    if (!code) return new BooleanSelector('not=shipping-method-uri,timestamps,create,delete');\n\n    const orgControls = ['shipping-container-uri', 'shipping-drop-type-uri', 'destinations'];\n    const authControls = ['authentication-key', 'meter-number', 'accountid', 'password'];\n    const codeToControls: Record<string, string[]> = {\n      'CUSTOM-ENDPOINT-POST': ['endpoint'],\n      'CUSTOM-CODE': ['custom-code'],\n      'CUSTOM': ['destinations', 'services'],\n      'FedEx': [...orgControls, ...authControls, 'services'],\n      'USPS': [...orgControls, 'services'],\n      'UPS': [...orgControls, ...authControls, 'services'],\n    };\n\n    if (codeToControls[code]) {\n      const controls = codeToControls[code];\n      const set = ['shipping-method-uri', ...controls, 'timestamps', 'delete', 'create'];\n      return new BooleanSelector(`not=${set.join()} ${super.hiddenSelector}`);\n    } else {\n      return super.hiddenSelector;\n    }\n  }\n\n  renderBody(): TemplateResult {\n    const method = this.form._embedded?.['fx:shipping_method'];\n\n    return html`\n      ${['method', 'container', 'drop_type'].map(tgt => {\n        const curie = `fx:shipping_${tgt}` as keyof Data['_embedded'];\n        const prop = `shipping_${tgt}_uri` as keyof Data;\n\n        if (this.form._embedded?.[curie] || !this.form[prop]) return;\n\n        return html`\n          <foxy-nucleon\n            class=\"hidden\"\n            infer=\"\"\n            href=${this.form[prop]}\n            @update=${(evt: CustomEvent) => {\n              const loader = evt.currentTarget as NucleonElement<any>;\n              const data = loader.data;\n\n              if (data) {\n                const newEmbeds = { ...this.form._embedded, [curie]: data };\n                this.edit({ _embedded: newEmbeds as Data['_embedded'] });\n              }\n            }}\n          >\n          </foxy-nucleon>\n        `;\n      })}\n\n      <foxy-internal-async-combo-box-control\n        item-value-path=\"_links.self.href\"\n        item-label-path=\"name\"\n        first=${ifDefined(this.shippingMethods ?? this.form._links?.['fx:shipping_methods'].href)}\n        infer=\"shipping-method-uri\"\n        .selectedItem=${this.form._embedded?.['fx:shipping_method']}\n        @selected-item-changed=${(evt: CustomEvent) => {\n          const { selectedItem } = evt.currentTarget as InternalAsyncComboBoxControl;\n          const newEmbeds = { 'fx:shipping_method': selectedItem };\n\n          this.edit({\n            _embedded: newEmbeds as Data['_embedded'],\n            shipping_container_uri: '',\n            shipping_drop_type_uri: '',\n          });\n        }}\n      >\n      </foxy-internal-async-combo-box-control>\n\n      <foxy-internal-async-combo-box-control\n        item-value-path=\"_links.self.href\"\n        item-label-path=\"name\"\n        first=${ifDefined(method?._links['fx:shipping_containers'].href)}\n        infer=\"shipping-container-uri\"\n        .selectedItem=${this.form._embedded?.['fx:shipping_container']}\n        @selected-item-changed=${(evt: CustomEvent) => {\n          const { selectedItem } = evt.currentTarget as InternalAsyncComboBoxControl;\n          const newEmbeds = { ...this.form._embedded, 'fx:shipping_container': selectedItem };\n          this.edit({ _embedded: newEmbeds as Data['_embedded'] });\n        }}\n      >\n      </foxy-internal-async-combo-box-control>\n\n      <foxy-internal-async-combo-box-control\n        item-value-path=\"_links.self.href\"\n        item-label-path=\"name\"\n        first=${ifDefined(method?._links['fx:shipping_drop_types'].href)}\n        infer=\"shipping-drop-type-uri\"\n        .selectedItem=${this.form._embedded?.['fx:shipping_drop_type']}\n        @selected-item-changed=${(evt: CustomEvent) => {\n          const { selectedItem } = evt.currentTarget as InternalAsyncComboBoxControl;\n          const newEmbeds = { ...this.form._embedded, 'fx:shipping_drop_type': selectedItem };\n          this.edit({ _embedded: newEmbeds as Data['_embedded'] });\n        }}\n      >\n      </foxy-internal-async-combo-box-control>\n\n      <foxy-internal-checkbox-group-control\n        infer=\"destinations\"\n        .getValue=${this.__getDestinations}\n        .setValue=${this.__setDestinations}\n        .options=${this.__destinations}\n      >\n      </foxy-internal-checkbox-group-control>\n\n      <foxy-internal-text-control infer=\"authentication-key\"> </foxy-internal-text-control>\n      <foxy-internal-text-control infer=\"meter-number\"></foxy-internal-text-control>\n\n      <foxy-internal-text-control\n        infer=${method?.code === 'CUSTOM-ENDPOINT-POST' ? 'endpoint' : 'accountid'}\n        property=\"accountid\"\n      >\n      </foxy-internal-text-control>\n\n      <foxy-internal-text-control infer=\"password\"></foxy-internal-text-control>\n      <foxy-internal-text-area-control infer=\"custom-code\"></foxy-internal-text-area-control>\n\n      <foxy-internal-store-shipping-method-form-services-control infer=\"services\">\n      </foxy-internal-store-shipping-method-form-services-control>\n\n      ${super.renderBody()}\n    `;\n  }\n}\n"]}

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

@@ -1,26 +1,67 @@
-import type { CSSResultArray, PropertyDeclarations } from 'lit-element';
-import type { PaymentsApiPaymentPresetForm } from '../PaymentsApiPaymentPresetForm/PaymentsApiPaymentPresetForm';
-import type { TemplateConfigForm } from '../TemplateConfigForm/TemplateConfigForm';
+import type { PropertyDeclarations } from 'lit-element';
+import type { Data, Templates } from './types';
 import type { TemplateResult } from 'lit-html';
 import type { NucleonV8N } from '../NucleonElement/types';
-import type { Data } from './types';
 import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from '../../internal/InternalForm/InternalForm';
 declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
     defaultNS: string;
 };
+/**
+ * Form element for creating and editing template sets (`fx:template_set`).
+ *
+ * @slot description:before
+ * @slot description:after
+ *
+ * @slot code:before
+ * @slot code:after
+ *
+ * @slot language:before
+ * @slot language:after
+ *
+ * @slot locale-code:before
+ * @slot locale-code:after
+ *
+ * @slot payment-method-set-uri:before
+ * @slot payment-method-set-uri:after
+ *
+ * @slot language-overrides:before
+ * @slot language-overrides:after
+ *
+ * @slot timestamps:before
+ * @slot timestamps:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @element foxy-template-set-form
+ * @since 1.21.0
+ */
 export declare class TemplateSetForm extends Base<Data> {
     static get properties(): PropertyDeclarations;
-    static get styles(): CSSResultArray;
     static get v8n(): NucleonV8N<Data>;
+    /** URL of the store's `fx:payment_method_sets` collection (used to fill the relevant dropdown with options). */
     paymentMethodSets: string | null;
+    /** URL of the `fx:language_strings` property helper (passed through to foxy-i18n-editor). */
     languageStrings: string | null;
+    /** URL of the `fx:locale_codes` property helper (used to fill the relevant dropdown with options). */
     localeCodes: string | null;
+    /** URL of the `fx:languages` property helper (used to fill the relevant dropdown with options). */
     languages: string | null;
-    get hiddenSelector(): BooleanSelector;
+    /** Template render functions mapped to their name. */
+    templates: Templates;
+    private readonly __paymentMethodSetLoaderId;
+    private readonly __localeCodesLoaderId;
+    private readonly __languagesLoaderId;
+    get disabledSelector(): BooleanSelector;
     get readonlySelector(): BooleanSelector;
-    get templateConfigForm(): TemplateConfigForm | null;
-    get paymentsApiPaymentPresetForm(): PaymentsApiPaymentPresetForm | null;
+    get hiddenSelector(): BooleanSelector;
     renderBody(): TemplateResult;
+    private get __paymentMethodSetLoader();
+    private get __localeCodesLoader();
+    private get __languagesLoader();
 }
 export {};

package/dist/elements/public/TemplateSetForm/TemplateSetForm.js

@@ -1,17 +1,60 @@
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { BooleanSelector } from '@foxy.io/sdk/core';
+import { ResponsiveMixin } from "../../../mixins/responsive.js";
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html, css } from 'lit-element';
+import { html } from 'lit-element';
 const NS = 'template-set-form';
-const Base = TranslatableMixin(InternalForm, NS);
+const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
+/**
+ * Form element for creating and editing template sets (`fx:template_set`).
+ *
+ * @slot description:before
+ * @slot description:after
+ *
+ * @slot code:before
+ * @slot code:after
+ *
+ * @slot language:before
+ * @slot language:after
+ *
+ * @slot locale-code:before
+ * @slot locale-code:after
+ *
+ * @slot payment-method-set-uri:before
+ * @slot payment-method-set-uri:after
+ *
+ * @slot language-overrides:before
+ * @slot language-overrides:after
+ *
+ * @slot timestamps:before
+ * @slot timestamps:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @element foxy-template-set-form
+ * @since 1.21.0
+ */
 export class TemplateSetForm extends Base {
     constructor() {
         super(...arguments);
+        /** URL of the store's `fx:payment_method_sets` collection (used to fill the relevant dropdown with options). */
         this.paymentMethodSets = null;
-        this.languageStrings = 'https://demo.api/hapi/property_helpers/10';
+        /** URL of the `fx:language_strings` property helper (passed through to foxy-i18n-editor). */
+        this.languageStrings = null;
+        /** URL of the `fx:locale_codes` property helper (used to fill the relevant dropdown with options). */
         this.localeCodes = null;
+        /** URL of the `fx:languages` property helper (used to fill the relevant dropdown with options). */
         this.languages = null;
+        /** Template render functions mapped to their name. */
+        this.templates = {};
+        this.__paymentMethodSetLoaderId = 'paymentMethodSetLoader';
+        this.__localeCodesLoaderId = 'localeCodesLoader';
+        this.__languagesLoaderId = 'languagesLoader';
     }
     static get properties() {
         return {
@@ -22,20 +65,6 @@ export class TemplateSetForm extends Base {
             languages: {},
         };
     }
-    static get styles() {
-        return [
-            super.styles,
-            css `vaadin-button::part(label){
-  flex:1;
-  padding:0;
-}
-
-.grid-cols-16rem{
-  grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
-}
-      `,
-        ];
-    }
     static get v8n() {
         return [
             ({ description: v }) => !!v || 'description:v8n_required',
@@ -46,56 +75,44 @@ export class TemplateSetForm extends Base {
             ({ locale_code: v }) => !!v || 'locale_code:v8n_required',
         ];
     }
-    get hiddenSelector() {
-        var _a;
-        const alwaysHidden = [
-            'cart-template-uri:not=content',
-            'cart-include-template-uri:not=content',
-            'email-template-uri:not=content,template-language',
-            'checkout-template-uri:not=content',
-            'receipt-template-uri:not=content',
-            'config:payment-method-set-uri:delete',
-            'config:payment-method-set-uri:create',
-            'config:payment-method-set-uri:timestamps',
-            'config:payment-method-set-uri:description',
-            'config:template-dialog:description',
-            'config:template-dialog:delete',
-        ];
-        if (((_a = this.data) === null || _a === void 0 ? void 0 : _a.code) === 'DEFAULT')
-            alwaysHidden.push('delete');
-        return new BooleanSelector(`${alwaysHidden.join(' ')} ${super.hiddenSelector.toString()}`);
+    get disabledSelector() {
+        var _a, _b, _c;
+        const alwaysDisabled = [];
+        if (!((_a = this.__languagesLoader) === null || _a === void 0 ? void 0 : _a.data))
+            alwaysDisabled.push('language');
+        if (!((_b = this.__localeCodesLoader) === null || _b === void 0 ? void 0 : _b.data))
+            alwaysDisabled.push('locale-code');
+        if (!((_c = this.__paymentMethodSetLoader) === null || _c === void 0 ? void 0 : _c.data) && this.form.payment_method_set_uri) {
+            alwaysDisabled.push('payment-method-set-uri');
+        }
+        return new BooleanSelector(`${alwaysDisabled.join(' ')} ${super.disabledSelector}`);
     }
     get readonlySelector() {
         var _a;
         const alwaysReadonly = [];
         if (((_a = this.data) === null || _a === void 0 ? void 0 : _a.code) === 'DEFAULT')
             alwaysReadonly.push('code', 'description');
-        return new BooleanSelector(`${alwaysReadonly.join(' ')} ${super.readonlySelector.toString()}`);
-    }
-    get templateConfigForm() {
-        return this.renderRoot.querySelector('foxy-template-config-form');
+        return new BooleanSelector(`${alwaysReadonly.join(' ')} ${super.readonlySelector}`);
     }
-    get paymentsApiPaymentPresetForm() {
-        return this.renderRoot.querySelector('foxy-payments-api-payment-preset-form');
+    get hiddenSelector() {
+        var _a;
+        const alwaysHidden = [];
+        if (((_a = this.data) === null || _a === void 0 ? void 0 : _a.code) === 'DEFAULT')
+            alwaysHidden.push('delete');
+        return new BooleanSelector(`${alwaysHidden.join(' ')} ${super.hiddenSelector}`);
     }
     renderBody() {
-        var _a, _b, _c, _d;
-        const localeCodesLoader = this.renderRoot.querySelector('#localeCodes');
-        const localeCodes = localeCodesLoader === null || localeCodesLoader === void 0 ? void 0 : localeCodesLoader.data;
-        const localeCodeEntries = Object.entries((_a = localeCodes === null || localeCodes === void 0 ? void 0 : localeCodes.values) !== null && _a !== void 0 ? _a : {});
-        const localeCodeOptions = localeCodeEntries.map(([value, label]) => ({ value, label }));
-        const languagesLoader = this.renderRoot.querySelector('#languages');
-        const languages = languagesLoader === null || languagesLoader === void 0 ? void 0 : languagesLoader.data;
-        const languageEntries = Object.entries((_b = languages === null || languages === void 0 ? void 0 : languages.values) !== null && _b !== void 0 ? _b : {});
-        const languageOptions = languageEntries.map(([value, label]) => ({ value, label }));
-        const paymentMethodSetLoader = this.renderRoot.querySelector('#paymentMethodSet');
-        const paymentMethodSet = paymentMethodSetLoader === null || paymentMethodSetLoader === void 0 ? void 0 : paymentMethodSetLoader.data;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const localeCodeEntries = Object.entries((_c = (_b = (_a = this.__localeCodesLoader) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.values) !== null && _c !== void 0 ? _c : {});
+        const localeCodes = localeCodeEntries.map(([value, label]) => ({ value, label }));
+        const languageEntries = Object.entries((_f = (_e = (_d = this.__languagesLoader) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.values) !== null && _f !== void 0 ? _f : {});
+        const languages = languageEntries.map(([value, label]) => ({ value, label }));
         return html `
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined((_c = this.languages) !== null && _c !== void 0 ? _c : undefined)}
-        id="languages"
+        href=${ifDefined((_g = this.languages) !== null && _g !== void 0 ? _g : undefined)}
+        id=${this.__languagesLoaderId}
         @update=${() => this.requestUpdate()}
       >
       </foxy-nucleon>
@@ -103,8 +120,8 @@ export class TemplateSetForm extends Base {
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined((_d = this.localeCodes) !== null && _d !== void 0 ? _d : undefined)}
-        id="localeCodes"
+        href=${ifDefined((_h = this.localeCodes) !== null && _h !== void 0 ? _h : undefined)}
+        id=${this.__localeCodesLoaderId}
         @update=${() => this.requestUpdate()}
       >
       </foxy-nucleon>
@@ -112,20 +129,21 @@ export class TemplateSetForm extends Base {
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined(this.form.payment_method_set_uri)}
-        id="paymentMethodSet"
+        href=${ifDefined(this.form.payment_method_set_uri || undefined)}
+        id=${this.__paymentMethodSetLoaderId}
         @update=${() => this.requestUpdate()}
       >
       </foxy-nucleon>
 
-      <div class="grid grid-cols-16rem gap-m">
+      <div class="grid grid-cols-1 gap-m sm-grid-cols-2">
         <foxy-internal-text-control infer="description"></foxy-internal-text-control>
+
         <foxy-internal-text-control infer="code"></foxy-internal-text-control>
 
-        <foxy-internal-select-control infer="language" .options=${languageOptions}>
+        <foxy-internal-select-control infer="language" .options=${languages}>
         </foxy-internal-select-control>
 
-        <foxy-internal-select-control infer="locale-code" .options=${localeCodeOptions}>
+        <foxy-internal-select-control infer="locale-code" .options=${localeCodes}>
         </foxy-internal-select-control>
       </div>
 
@@ -134,23 +152,41 @@ export class TemplateSetForm extends Base {
         item-id-path="_links.self.href"
         infer="payment-method-set-uri"
         first=${this.paymentMethodSets}
-        .selectedItem=${paymentMethodSet}
+        .selectedItem=${(_j = this.__paymentMethodSetLoader) === null || _j === void 0 ? void 0 : _j.data}
       >
       </foxy-internal-async-combo-box-control>
 
-      ${this.data && this.languageStrings
+      ${this.data &&
+            this.languageStrings &&
+            !this.hiddenSelector.matches('language-overrides', true)
             ? html `
+            ${this.renderTemplateOrSlot('language-overrides:before')}
+
             <foxy-i18n-editor
               language-overrides=${this.data._links['fx:language_overrides'].href}
               selected-language=${this.form.language}
-              infer="i18n-editor"
+              infer="language-overrides"
               href=${this.languageStrings}
             >
             </foxy-i18n-editor>
+
+            ${this.renderTemplateOrSlot('language-overrides:after')}
           `
             : ''}
+
+      <!-- -->
+
       ${super.renderBody()}
     `;
     }
+    get __paymentMethodSetLoader() {
+        return this.renderRoot.querySelector(`#${this.__paymentMethodSetLoaderId}`);
+    }
+    get __localeCodesLoader() {
+        return this.renderRoot.querySelector(`#${this.__localeCodesLoaderId}`);
+    }
+    get __languagesLoader() {
+        return this.renderRoot.querySelector(`#${this.__languagesLoaderId}`);
+    }
 }
 //# sourceMappingURL=TemplateSetForm.js.map