@foxy.io/elements 1.18.0-beta.17 → 1.18.0-beta.19

package/dist/elements/public/ItemCard/ItemCard.js

@@ -1,8 +1,8 @@
 import { TranslatableMixin } from "../../../mixins/translatable.js";
-import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
 const NS = 'item-card';
 const Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));
 /**
@@ -14,27 +14,97 @@ const Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));
 export class ItemCard extends Base {
     constructor() {
         super(...arguments);
-        this.__currencyDisplay = '';
-        this.__currency = '';
+        this.localeCodes = null;
+        this.__transactionTemplateLoaderId = 'transactionTemplateLoader';
+        this.__defaultTemplateSetLoaderId = 'defaultTemplateSetLoader';
+        this.__localeCodesHelperLoaderId = 'localeCodesLoader';
+        this.__transactionLoaderId = 'transactionLoader';
+        this.__templateSetLoaderId = 'templateSetLoader';
+        this.__storeLoaderId = 'storeLoader';
+        this.__cartLoaderId = 'cartLoader';
     }
     static get properties() {
         return {
             ...super.properties,
-            __currencyDisplay: { attribute: false },
-            __currency: { attribute: false },
+            localeCodes: { type: String, attribute: 'locale-codes' },
         };
     }
     renderBody() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const quantity = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.quantity) !== null && _b !== void 0 ? _b : 0;
-        const price = (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.price) !== null && _d !== void 0 ? _d : 0;
+        const options = (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c._embedded) === null || _d === void 0 ? void 0 : _d['fx:item_options'];
+        const price = (_f = (_e = this.data) === null || _e === void 0 ? void 0 : _e.price) !== null && _f !== void 0 ? _f : 0;
+        const currencyDisplay = this.__currencyDisplay;
+        const currencyCode = this.__currencyCode;
         const totalPrice = quantity * price;
-        const options = (_f = (_e = this.data) === null || _e === void 0 ? void 0 : _e._embedded) === null || _f === void 0 ? void 0 : _f['fx:item_options'];
         return html `
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__transactionTemplateHref)}
+        id=${this.__transactionTemplateLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__defaultTemplateSetHref)}
+        id=${this.__defaultTemplateSetLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__localeCodesHelperHref)}
+        id=${this.__localeCodesHelperLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__transactionHref)}
+        id=${this.__transactionLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__templateSetHref)}
+        id=${this.__templateSetLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__storeHref)}
+        id=${this.__storeLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__cartHref)}
+        id=${this.__cartLoaderId}
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
       <div class="flex items-start space-x-m leading-m">
         <div class="w-l h-l relative flex-shrink-0">
           <img
-            class="relative w-full h-full object-cover rounded"
+            class="relative w-full h-full object-cover rounded-s"
             src=${ifDefined((_g = this.data) === null || _g === void 0 ? void 0 : _g.image)}
             alt=""
             @error=${(evt) => {
@@ -43,7 +113,7 @@ export class ItemCard extends Base {
         }}
           />
 
-          <div class="border border-contrast-10 absolute inset-0 rounded"></div>
+          <div class="border border-contrast-10 absolute inset-0 rounded-s"></div>
         </div>
 
         <div class="flex-1 min-w-0">
@@ -55,8 +125,8 @@ export class ItemCard extends Base {
 
                 <foxy-i18n
                   options=${JSON.stringify({
-            amount: `${price} ${this.__currency}`,
-            currencyDisplay: this.__currencyDisplay,
+            amount: `${price} ${currencyCode}`,
+            currencyDisplay,
         })}
                   key="price"
                   infer=""
@@ -67,8 +137,8 @@ export class ItemCard extends Base {
 
                 <foxy-i18n
                   options=${JSON.stringify({
-            amount: `${totalPrice} ${this.__currency}`,
-            currencyDisplay: this.__currencyDisplay,
+            amount: `${totalPrice} ${currencyCode}`,
+            currencyDisplay,
         })}
                   key="price"
                   infer=""
@@ -77,7 +147,9 @@ export class ItemCard extends Base {
               </div>
             </div>
 
-            ${((_j = this.data) === null || _j === void 0 ? void 0 : _j.subscription_frequency) ? html `
+            ${((_j = this.data) === null || _j === void 0 ? void 0 : _j.subscription_frequency) &&
+            !this.hiddenSelector.matches('autorenew-icon', true)
+            ? html `
                   <div
                     class="w-xs h-xs flex items-center justify-center rounded-full bg-contrast-5"
                   >
@@ -107,8 +179,8 @@ export class ItemCard extends Base {
                               >
                                 <foxy-i18n
                                   options=${JSON.stringify({
-                    amount: `${option.price_mod} ${this.__currency}`,
-                    currencyDisplay: this.__currencyDisplay,
+                    amount: `${option.price_mod} ${currencyCode}`,
+                    currencyDisplay: currencyDisplay,
                 })}
                                   key="price"
                                   infer=""
@@ -138,15 +210,132 @@ export class ItemCard extends Base {
       </div>
     `;
     }
-    async _sendGet() {
-        const item = await super._sendGet();
-        const [transaction, store] = await Promise.all([
-            super._fetch(item._links['fx:transaction'].href),
-            super._fetch(item._links['fx:store'].href),
-        ]);
-        this.__currency = transaction.currency_code;
-        this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';
-        return item;
+    get _isBodyReady() {
+        const isLoaded = !!this.__currencyDisplay && !!this.__currencyCode;
+        return super._isBodyReady && isLoaded;
+    }
+    get __transactionTemplateHref() {
+        var _a, _b, _c;
+        try {
+            const links = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links;
+            const url = new URL((_c = (_b = links === null || links === void 0 ? void 0 : links['fx:subscription']) === null || _b === void 0 ? void 0 : _b.href) !== null && _c !== void 0 ? _c : '');
+            url.searchParams.set('zoom', 'transaction_template');
+            return url.toString();
+        }
+        catch (_d) {
+            //
+        }
+    }
+    get __defaultTemplateSetHref() {
+        var _a, _b, _c, _d;
+        const templateSetUri = (_b = ((_a = this.__cart) !== null && _a !== void 0 ? _a : this.__transactionTemplate)) === null || _b === void 0 ? void 0 : _b.template_set_uri;
+        if (templateSetUri === '') {
+            try {
+                const url = new URL((_d = (_c = this.__store) === null || _c === void 0 ? void 0 : _c._links['fx:template_sets'].href) !== null && _d !== void 0 ? _d : '');
+                url.searchParams.set('code', 'DEFAULT');
+                return url.toString();
+            }
+            catch (_e) {
+                //
+            }
+        }
+    }
+    get __localeCodesHelperHref() {
+        var _a;
+        if (this.__defaultTemplateSetHref || this.__templateSetHref) {
+            return (_a = this.localeCodes) !== null && _a !== void 0 ? _a : void 0;
+        }
+    }
+    get __transactionHref() {
+        var _a, _b;
+        return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:transaction']) === null || _b === void 0 ? void 0 : _b.href;
+    }
+    get __templateSetHref() {
+        var _a;
+        const cart = (_a = this.__cart) !== null && _a !== void 0 ? _a : this.__transactionTemplate;
+        // TODO: remove the directive below once SDK is updated
+        // @ts-expect-error SDK types are incomplete
+        const currencyCode = cart === null || cart === void 0 ? void 0 : cart.currency_code;
+        if (!currencyCode)
+            return (cart === null || cart === void 0 ? void 0 : cart.template_set_uri) || void 0;
+    }
+    get __storeHref() {
+        var _a, _b;
+        return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:store']) === null || _b === void 0 ? void 0 : _b.href;
+    }
+    get __cartHref() {
+        var _a, _b;
+        const links = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links;
+        return (_b = links === null || links === void 0 ? void 0 : links['fx:cart']) === null || _b === void 0 ? void 0 : _b.href;
+    }
+    get __transactionTemplate() {
+        var _a, _b;
+        const selector = `#${this.__transactionTemplateLoaderId}`;
+        const loader = this.renderRoot.querySelector(selector);
+        return (_b = (_a = loader === null || loader === void 0 ? void 0 : loader.data) === null || _a === void 0 ? void 0 : _a._embedded['fx:transaction_template']) !== null && _b !== void 0 ? _b : null;
+    }
+    get __defaultTemplateSet() {
+        var _a, _b;
+        const selector = `#${this.__defaultTemplateSetLoaderId}`;
+        const loader = this.renderRoot.querySelector(selector);
+        return (_b = (_a = loader === null || loader === void 0 ? void 0 : loader.data) === null || _a === void 0 ? void 0 : _a._embedded['fx:template_sets'][0]) !== null && _b !== void 0 ? _b : null;
+    }
+    get __localeCodesHelper() {
+        var _a, _b;
+        const selector = `#${this.__localeCodesHelperLoaderId}`;
+        return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
+    }
+    get __transaction() {
+        var _a, _b;
+        const selector = `#${this.__transactionLoaderId}`;
+        return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
+    }
+    get __templateSet() {
+        var _a, _b;
+        const selector = `#${this.__templateSetLoaderId}`;
+        return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
+    }
+    get __store() {
+        var _a, _b;
+        const selector = `#${this.__storeLoaderId}`;
+        return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
+    }
+    get __cart() {
+        var _a, _b;
+        const selector = `#${this.__cartLoaderId}`;
+        return (_b = (_a = this.renderRoot.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : null;
+    }
+    get __currencyDisplay() {
+        var _a;
+        const useCode = (_a = this.__store) === null || _a === void 0 ? void 0 : _a.use_international_currency_symbol;
+        if (useCode === true)
+            return 'code';
+        if (useCode === false)
+            return 'symbol';
+        if (this.data && !this.data._links['fx:store'])
+            return 'symbol';
+    }
+    get __currencyCode() {
+        var _a, _b, _c, _d;
+        const transaction = this.__transaction;
+        if (transaction) {
+            return transaction.currency_code;
+        }
+        else {
+            const cart = (_a = this.__cart) !== null && _a !== void 0 ? _a : this.__transactionTemplate;
+            if (cart && 'currency_code' in cart) {
+                // TODO: remove the directive below once the SDK is updated
+                // @ts-expect-error SDK types are incomplete
+                return cart.currency_code;
+            }
+            else {
+                const allLocaleCodes = this.__localeCodesHelper;
+                const localeCode = (_c = ((_b = this.__templateSet) !== null && _b !== void 0 ? _b : this.__defaultTemplateSet)) === null || _c === void 0 ? void 0 : _c.locale_code;
+                const localeInfo = localeCode ? allLocaleCodes === null || allLocaleCodes === void 0 ? void 0 : allLocaleCodes.values[localeCode] : void 0;
+                if (localeInfo)
+                    return (_d = /Currency: ([A-Z]{3})/g.exec(localeInfo)) === null || _d === void 0 ? void 0 : _d[1];
+            }
+        }
     }
 }
 ItemCard.__placeholder = 'data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="40" height="40" fill="%23E8E8E8"/%3E%3Cpath d="M31.5143 0H24.5476L0 24.5476V31.5143L11.7046 19.8097L11.9841 17.0782C12.0983 15.9624 13.0131 15.1154 14.1038 15.1154H15.7373V12.1923C15.7373 10.9815 16.6915 10 17.8687 10H21.5143L31.5143 0Z" fill="white"/%3E%3Cpath d="M11.5434 21.3852L0 32.9285V39.8953L11.5822 28.3131C11.172 27.8663 10.9438 27.2444 11.012 26.5782L11.5434 21.3852Z" fill="white"/%3E%3Cpath d="M12.4305 28.879L1.30951 40H8.27631L19.2763 29H13.1316C12.8853 29 12.6495 28.9573 12.4305 28.879Z" fill="white"/%3E%3Cpath d="M28.3113 19.965L28.0159 17.0782C27.9116 16.0591 27.1395 15.2642 26.1754 15.1341L40 1.3095V8.27627L28.3113 19.965Z" fill="white"/%3E%3Cpath d="M20.6905 29L9.69049 40H16.6572L27.9755 28.6817C27.6541 28.8832 27.2756 29 26.8684 29H20.6905Z" fill="white"/%3E%3Cpath d="M28.6572 28C28.9128 27.5952 29.0415 27.1003 28.988 26.5782L28.4426 21.2479L40 9.69053V16.6572L28.6572 28Z" fill="white"/%3E%3Cpath d="M25.0381 40H18.0715L40 18.0715V25.0381L25.0381 40Z" fill="white"/%3E%3Cpath d="M26.4524 40H33.4191L40 33.4191V26.4524L26.4524 40Z" fill="white"/%3E%3Cpath d="M40 40H34.8333L40 34.8333V40Z" fill="white"/%3E%3Cpath d="M16.1666 0H23.1334L0 23.1334V16.1666L16.1666 0Z" fill="white"/%3E%3Cpath d="M14.7524 0H7.78571L0 7.78573V14.7524L14.7524 0Z" fill="white"/%3E%3Cpath d="M0 0H6.37152L0 6.37151V0Z" fill="white"/%3E%3Cpath d="M21.467 11.4615H17.8687C17.4763 11.4615 17.1582 11.7887 17.1582 12.1923V15.1154H22.8418V12.1923C22.8418 11.7887 22.5237 11.4615 22.1313 11.4615H21.467Z" fill="white"/%3E%3Cpath d="M24.7798 15.1154H24.2627V12.1923C24.2627 11.227 23.6562 10.4075 22.8138 10.1148L32.9286 0H39.89L24.7798 15.1154Z" fill="white"/%3E%3C/svg%3E';

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

@@ -1 +1 @@
-{"version":3,"file":"ItemCard.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemCard/ItemCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { html } from 'lit-html';\nimport { Data } from './types';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { Rels } from '@foxy.io/sdk/backend';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\n\nconst NS = 'item-card';\nconst Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));\n\n/**\n * Basic card displaying an item.\n *\n * @element foxy-item-card\n * @since 1.17.0\n */\nexport class ItemCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      __currencyDisplay: { attribute: false },\n      __currency: { attribute: false },\n    };\n  }\n\n  private static readonly __placeholder =\n    'data:image/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Crect width=\"40\" height=\"40\" fill=\"%23E8E8E8\"/%3E%3Cpath d=\"M31.5143 0H24.5476L0 24.5476V31.5143L11.7046 19.8097L11.9841 17.0782C12.0983 15.9624 13.0131 15.1154 14.1038 15.1154H15.7373V12.1923C15.7373 10.9815 16.6915 10 17.8687 10H21.5143L31.5143 0Z\" fill=\"white\"/%3E%3Cpath d=\"M11.5434 21.3852L0 32.9285V39.8953L11.5822 28.3131C11.172 27.8663 10.9438 27.2444 11.012 26.5782L11.5434 21.3852Z\" fill=\"white\"/%3E%3Cpath d=\"M12.4305 28.879L1.30951 40H8.27631L19.2763 29H13.1316C12.8853 29 12.6495 28.9573 12.4305 28.879Z\" fill=\"white\"/%3E%3Cpath d=\"M28.3113 19.965L28.0159 17.0782C27.9116 16.0591 27.1395 15.2642 26.1754 15.1341L40 1.3095V8.27627L28.3113 19.965Z\" fill=\"white\"/%3E%3Cpath d=\"M20.6905 29L9.69049 40H16.6572L27.9755 28.6817C27.6541 28.8832 27.2756 29 26.8684 29H20.6905Z\" fill=\"white\"/%3E%3Cpath d=\"M28.6572 28C28.9128 27.5952 29.0415 27.1003 28.988 26.5782L28.4426 21.2479L40 9.69053V16.6572L28.6572 28Z\" fill=\"white\"/%3E%3Cpath d=\"M25.0381 40H18.0715L40 18.0715V25.0381L25.0381 40Z\" fill=\"white\"/%3E%3Cpath d=\"M26.4524 40H33.4191L40 33.4191V26.4524L26.4524 40Z\" fill=\"white\"/%3E%3Cpath d=\"M40 40H34.8333L40 34.8333V40Z\" fill=\"white\"/%3E%3Cpath d=\"M16.1666 0H23.1334L0 23.1334V16.1666L16.1666 0Z\" fill=\"white\"/%3E%3Cpath d=\"M14.7524 0H7.78571L0 7.78573V14.7524L14.7524 0Z\" fill=\"white\"/%3E%3Cpath d=\"M0 0H6.37152L0 6.37151V0Z\" fill=\"white\"/%3E%3Cpath d=\"M21.467 11.4615H17.8687C17.4763 11.4615 17.1582 11.7887 17.1582 12.1923V15.1154H22.8418V12.1923C22.8418 11.7887 22.5237 11.4615 22.1313 11.4615H21.467Z\" fill=\"white\"/%3E%3Cpath d=\"M24.7798 15.1154H24.2627V12.1923C24.2627 11.227 23.6562 10.4075 22.8138 10.1148L32.9286 0H39.89L24.7798 15.1154Z\" fill=\"white\"/%3E%3C/svg%3E';\n\n  __currencyDisplay = '';\n\n  __currency = '';\n\n  renderBody(): TemplateResult {\n    const quantity = this.data?.quantity ?? 0;\n    const price = this.data?.price ?? 0;\n    const totalPrice = quantity * price;\n    const options = this.data?._embedded?.['fx:item_options'];\n\n    return html`\n      <div class=\"flex items-start space-x-m leading-m\">\n        <div class=\"w-l h-l relative flex-shrink-0\">\n          <img\n            class=\"relative w-full h-full object-cover rounded\"\n            src=${ifDefined(this.data?.image)}\n            alt=\"\"\n            @error=${(evt: Event) => {\n              const img = evt.currentTarget as HTMLImageElement;\n              img.src = ItemCard.__placeholder;\n            }}\n          />\n\n          <div class=\"border border-contrast-10 absolute inset-0 rounded\"></div>\n        </div>\n\n        <div class=\"flex-1 min-w-0\">\n          <div class=\"flex-1 h-l flex items-center\">\n            <div class=\"flex-1 leading-s\">\n              <div class=\"font-semibold text-m truncate\">${this.data?.name}</div>\n              <div class=\"text-secondary text-m truncate\">\n                ${quantity} &times;\n\n                <foxy-i18n\n                  options=${JSON.stringify({\n                    amount: `${price} ${this.__currency}`,\n                    currencyDisplay: this.__currencyDisplay,\n                  })}\n                  key=\"price\"\n                  infer=\"\"\n                >\n                </foxy-i18n>\n\n                &equals;\n\n                <foxy-i18n\n                  options=${JSON.stringify({\n                    amount: `${totalPrice} ${this.__currency}`,\n                    currencyDisplay: this.__currencyDisplay,\n                  })}\n                  key=\"price\"\n                  infer=\"\"\n                >\n                </foxy-i18n>\n              </div>\n            </div>\n\n            ${this.data?.subscription_frequency\n              ? html`\n                  <div\n                    class=\"w-xs h-xs flex items-center justify-center rounded-full bg-contrast-5\"\n                  >\n                    <iron-icon icon=\"icons:autorenew\" class=\"icon-inline text-s\"></iron-icon>\n                  </div>\n                `\n              : ''}\n          </div>\n\n          ${options && options.length > 0\n            ? html`\n                <div class=\"mt-s\">\n                  ${options.map(\n                    option => html`\n                      <div\n                        data-testclass=\"option\"\n                        class=\"flex items-center text-m space-x-xs leading-m\"\n                      >\n                        <div class=\"flex-1 text-tertiary truncate\">\n                          ${option.name}: ${option.value}\n                        </div>\n                        ${option.price_mod\n                          ? html`\n                              <div\n                                class=\"${option.price_mod > 0\n                                  ? 'text-success'\n                                  : 'text-error'} rounded px-xs truncate\"\n                              >\n                                <foxy-i18n\n                                  options=${JSON.stringify({\n                                    amount: `${option.price_mod} ${this.__currency}`,\n                                    currencyDisplay: this.__currencyDisplay,\n                                  })}\n                                  key=\"price\"\n                                  infer=\"\"\n                                >\n                                </foxy-i18n>\n                              </div>\n                            `\n                          : ''}\n                        ${option.weight_mod\n                          ? html`\n                              <div\n                                class=\"${option.price_mod > 0\n                                  ? 'text-success'\n                                  : 'text-error'} rounded px-xs truncate\"\n                              >\n                                ${option.weight_mod}\n                                <foxy-i18n key=\"wgt\" infer=\"\"></foxy-i18n>\n                              </div>\n                            `\n                          : ''}\n                      </div>\n                    `\n                  )}\n                </div>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  protected async _sendGet(): Promise<Data> {\n    type Transaction = Resource<Rels.Transaction>;\n    type Store = Resource<Rels.Store>;\n\n    const item = await super._sendGet();\n    const [transaction, store] = await Promise.all([\n      super._fetch<Transaction>(item._links['fx:transaction'].href),\n      super._fetch<Store>(item._links['fx:store'].href),\n    ]);\n\n    this.__currency = transaction.currency_code;\n    this.__currencyDisplay = store.use_international_currency_symbol ? 'code' : 'symbol';\n\n    return item;\n  }\n}\n"]}
+{"version":3,"file":"ItemCard.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemCard/ItemCard.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { NucleonElement } from '../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'item-card';\nconst Base = ConfigurableMixin(TranslatableMixin(InternalCard, NS));\n\n/**\n * Basic card displaying an item.\n *\n * @element foxy-item-card\n * @since 1.17.0\n */\nexport class ItemCard extends Base<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      localeCodes: { type: String, attribute: 'locale-codes' },\n    };\n  }\n\n  localeCodes: string | null = null;\n\n  private static readonly __placeholder =\n    'data:image/svg+xml,%3Csvg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Crect width=\"40\" height=\"40\" fill=\"%23E8E8E8\"/%3E%3Cpath d=\"M31.5143 0H24.5476L0 24.5476V31.5143L11.7046 19.8097L11.9841 17.0782C12.0983 15.9624 13.0131 15.1154 14.1038 15.1154H15.7373V12.1923C15.7373 10.9815 16.6915 10 17.8687 10H21.5143L31.5143 0Z\" fill=\"white\"/%3E%3Cpath d=\"M11.5434 21.3852L0 32.9285V39.8953L11.5822 28.3131C11.172 27.8663 10.9438 27.2444 11.012 26.5782L11.5434 21.3852Z\" fill=\"white\"/%3E%3Cpath d=\"M12.4305 28.879L1.30951 40H8.27631L19.2763 29H13.1316C12.8853 29 12.6495 28.9573 12.4305 28.879Z\" fill=\"white\"/%3E%3Cpath d=\"M28.3113 19.965L28.0159 17.0782C27.9116 16.0591 27.1395 15.2642 26.1754 15.1341L40 1.3095V8.27627L28.3113 19.965Z\" fill=\"white\"/%3E%3Cpath d=\"M20.6905 29L9.69049 40H16.6572L27.9755 28.6817C27.6541 28.8832 27.2756 29 26.8684 29H20.6905Z\" fill=\"white\"/%3E%3Cpath d=\"M28.6572 28C28.9128 27.5952 29.0415 27.1003 28.988 26.5782L28.4426 21.2479L40 9.69053V16.6572L28.6572 28Z\" fill=\"white\"/%3E%3Cpath d=\"M25.0381 40H18.0715L40 18.0715V25.0381L25.0381 40Z\" fill=\"white\"/%3E%3Cpath d=\"M26.4524 40H33.4191L40 33.4191V26.4524L26.4524 40Z\" fill=\"white\"/%3E%3Cpath d=\"M40 40H34.8333L40 34.8333V40Z\" fill=\"white\"/%3E%3Cpath d=\"M16.1666 0H23.1334L0 23.1334V16.1666L16.1666 0Z\" fill=\"white\"/%3E%3Cpath d=\"M14.7524 0H7.78571L0 7.78573V14.7524L14.7524 0Z\" fill=\"white\"/%3E%3Cpath d=\"M0 0H6.37152L0 6.37151V0Z\" fill=\"white\"/%3E%3Cpath d=\"M21.467 11.4615H17.8687C17.4763 11.4615 17.1582 11.7887 17.1582 12.1923V15.1154H22.8418V12.1923C22.8418 11.7887 22.5237 11.4615 22.1313 11.4615H21.467Z\" fill=\"white\"/%3E%3Cpath d=\"M24.7798 15.1154H24.2627V12.1923C24.2627 11.227 23.6562 10.4075 22.8138 10.1148L32.9286 0H39.89L24.7798 15.1154Z\" fill=\"white\"/%3E%3C/svg%3E';\n\n  private readonly __transactionTemplateLoaderId = 'transactionTemplateLoader';\n\n  private readonly __defaultTemplateSetLoaderId = 'defaultTemplateSetLoader';\n\n  private readonly __localeCodesHelperLoaderId = 'localeCodesLoader';\n\n  private readonly __transactionLoaderId = 'transactionLoader';\n\n  private readonly __templateSetLoaderId = 'templateSetLoader';\n\n  private readonly __storeLoaderId = 'storeLoader';\n\n  private readonly __cartLoaderId = 'cartLoader';\n\n  renderBody(): TemplateResult {\n    const quantity = this.data?.quantity ?? 0;\n    const options = this.data?._embedded?.['fx:item_options'];\n    const price = this.data?.price ?? 0;\n\n    const currencyDisplay = this.__currencyDisplay;\n    const currencyCode = this.__currencyCode;\n    const totalPrice = quantity * price;\n\n    return html`\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__transactionTemplateHref)}\n        id=${this.__transactionTemplateLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__defaultTemplateSetHref)}\n        id=${this.__defaultTemplateSetLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__localeCodesHelperHref)}\n        id=${this.__localeCodesHelperLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__transactionHref)}\n        id=${this.__transactionLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__templateSetHref)}\n        id=${this.__templateSetLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__storeHref)}\n        id=${this.__storeLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <foxy-nucleon\n        class=\"hidden\"\n        infer=\"\"\n        href=${ifDefined(this.__cartHref)}\n        id=${this.__cartLoaderId}\n        @update=${() => this.requestUpdate()}\n      >\n      </foxy-nucleon>\n\n      <div class=\"flex items-start space-x-m leading-m\">\n        <div class=\"w-l h-l relative flex-shrink-0\">\n          <img\n            class=\"relative w-full h-full object-cover rounded-s\"\n            src=${ifDefined(this.data?.image)}\n            alt=\"\"\n            @error=${(evt: Event) => {\n              const img = evt.currentTarget as HTMLImageElement;\n              img.src = ItemCard.__placeholder;\n            }}\n          />\n\n          <div class=\"border border-contrast-10 absolute inset-0 rounded-s\"></div>\n        </div>\n\n        <div class=\"flex-1 min-w-0\">\n          <div class=\"flex-1 h-l flex items-center\">\n            <div class=\"flex-1 leading-s\">\n              <div class=\"font-semibold text-m truncate\">${this.data?.name}</div>\n              <div class=\"text-secondary text-m truncate\">\n                ${quantity} &times;\n\n                <foxy-i18n\n                  options=${JSON.stringify({\n                    amount: `${price} ${currencyCode}`,\n                    currencyDisplay,\n                  })}\n                  key=\"price\"\n                  infer=\"\"\n                >\n                </foxy-i18n>\n\n                &equals;\n\n                <foxy-i18n\n                  options=${JSON.stringify({\n                    amount: `${totalPrice} ${currencyCode}`,\n                    currencyDisplay,\n                  })}\n                  key=\"price\"\n                  infer=\"\"\n                >\n                </foxy-i18n>\n              </div>\n            </div>\n\n            ${this.data?.subscription_frequency &&\n            !this.hiddenSelector.matches('autorenew-icon', true)\n              ? html`\n                  <div\n                    class=\"w-xs h-xs flex items-center justify-center rounded-full bg-contrast-5\"\n                  >\n                    <iron-icon icon=\"icons:autorenew\" class=\"icon-inline text-s\"></iron-icon>\n                  </div>\n                `\n              : ''}\n          </div>\n\n          ${options && options.length > 0\n            ? html`\n                <div class=\"mt-s\">\n                  ${options.map(\n                    option => html`\n                      <div\n                        data-testclass=\"option\"\n                        class=\"flex items-center text-m space-x-xs leading-m\"\n                      >\n                        <div class=\"flex-1 text-tertiary truncate\">\n                          ${option.name}: ${option.value}\n                        </div>\n                        ${option.price_mod\n                          ? html`\n                              <div\n                                class=\"${option.price_mod > 0\n                                  ? 'text-success'\n                                  : 'text-error'} rounded px-xs truncate\"\n                              >\n                                <foxy-i18n\n                                  options=${JSON.stringify({\n                                    amount: `${option.price_mod} ${currencyCode}`,\n                                    currencyDisplay: currencyDisplay,\n                                  })}\n                                  key=\"price\"\n                                  infer=\"\"\n                                >\n                                </foxy-i18n>\n                              </div>\n                            `\n                          : ''}\n                        ${option.weight_mod\n                          ? html`\n                              <div\n                                class=\"${option.price_mod > 0\n                                  ? 'text-success'\n                                  : 'text-error'} rounded px-xs truncate\"\n                              >\n                                ${option.weight_mod}\n                                <foxy-i18n key=\"wgt\" infer=\"\"></foxy-i18n>\n                              </div>\n                            `\n                          : ''}\n                      </div>\n                    `\n                  )}\n                </div>\n              `\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n\n  protected get _isBodyReady(): boolean {\n    const isLoaded = !!this.__currencyDisplay && !!this.__currencyCode;\n    return super._isBodyReady && isLoaded;\n  }\n\n  private get __transactionTemplateHref() {\n    try {\n      const links = this.data?._links as Partial<Record<string, { href: string }>> | undefined;\n      const url = new URL(links?.['fx:subscription']?.href ?? '');\n      url.searchParams.set('zoom', 'transaction_template');\n      return url.toString();\n    } catch {\n      //\n    }\n  }\n\n  private get __defaultTemplateSetHref() {\n    const templateSetUri = (this.__cart ?? this.__transactionTemplate)?.template_set_uri;\n\n    if (templateSetUri === '') {\n      try {\n        const url = new URL(this.__store?._links['fx:template_sets'].href ?? '');\n        url.searchParams.set('code', 'DEFAULT');\n        return url.toString();\n      } catch {\n        //\n      }\n    }\n  }\n\n  private get __localeCodesHelperHref() {\n    if (this.__defaultTemplateSetHref || this.__templateSetHref) {\n      return this.localeCodes ?? void 0;\n    }\n  }\n\n  private get __transactionHref() {\n    return this.data?._links['fx:transaction']?.href;\n  }\n\n  private get __templateSetHref() {\n    const cart = this.__cart ?? this.__transactionTemplate;\n    // TODO: remove the directive below once SDK is updated\n    // @ts-expect-error SDK types are incomplete\n    const currencyCode = cart?.currency_code as string | undefined;\n\n    if (!currencyCode) return cart?.template_set_uri || void 0;\n  }\n\n  private get __storeHref() {\n    return this.data?._links['fx:store']?.href;\n  }\n\n  private get __cartHref() {\n    const links = this.data?._links as Partial<Record<string, { href: string }>> | undefined;\n    return links?.['fx:cart']?.href;\n  }\n\n  private get __transactionTemplate() {\n    type Loader = NucleonElement<Resource<Rels.Subscription, { zoom: 'transaction_template' }>>;\n    const selector = `#${this.__transactionTemplateLoaderId}`;\n    const loader = this.renderRoot.querySelector<Loader>(selector);\n    return loader?.data?._embedded['fx:transaction_template'] ?? null;\n  }\n\n  private get __defaultTemplateSet() {\n    type Loader = NucleonElement<Resource<Rels.TemplateSets>>;\n    const selector = `#${this.__defaultTemplateSetLoaderId}`;\n    const loader = this.renderRoot.querySelector<Loader>(selector);\n    return loader?.data?._embedded['fx:template_sets'][0] ?? null;\n  }\n\n  private get __localeCodesHelper() {\n    type Loader = NucleonElement<Resource<Rels.LocaleCodes>>;\n    const selector = `#${this.__localeCodesHelperLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __transaction() {\n    type Loader = NucleonElement<Resource<Rels.Transaction>>;\n    const selector = `#${this.__transactionLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __templateSet() {\n    type Loader = NucleonElement<Resource<Rels.TemplateSet>>;\n    const selector = `#${this.__templateSetLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __store() {\n    type Loader = NucleonElement<Resource<Rels.Store>>;\n    const selector = `#${this.__storeLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __cart() {\n    type Loader = NucleonElement<Resource<Rels.Cart>>;\n    const selector = `#${this.__cartLoaderId}`;\n    return this.renderRoot.querySelector<Loader>(selector)?.data ?? null;\n  }\n\n  private get __currencyDisplay() {\n    const useCode = this.__store?.use_international_currency_symbol;\n\n    if (useCode === true) return 'code';\n    if (useCode === false) return 'symbol';\n    if (this.data && !this.data._links['fx:store']) return 'symbol';\n  }\n\n  private get __currencyCode() {\n    const transaction = this.__transaction;\n\n    if (transaction) {\n      return transaction.currency_code;\n    } else {\n      const cart = this.__cart ?? this.__transactionTemplate;\n\n      if (cart && 'currency_code' in cart) {\n        // TODO: remove the directive below once the SDK is updated\n        // @ts-expect-error SDK types are incomplete\n        return cart.currency_code as string;\n      } else {\n        const allLocaleCodes = this.__localeCodesHelper;\n        const localeCode = (this.__templateSet ?? this.__defaultTemplateSet)?.locale_code;\n        const localeInfo = localeCode ? allLocaleCodes?.values[localeCode] : void 0;\n\n        if (localeInfo) return /Currency: ([A-Z]{3})/g.exec(localeInfo)?.[1];\n      }\n    }\n  }\n}\n"]}

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

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

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

@@ -1,4 +1,5 @@
 import "../../internal/InternalCard/index.js";
+import "../NucleonElement/index.js";
 import "../I18n/index.js";
 import { ItemCard } from "./ItemCard.js";
 customElements.define('foxy-item-card', ItemCard);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemCard/index.ts"],"names":[],"mappings":"AAAA,8CAA2C;AAC3C,0BAAuB;AACvB,OAAO,EAAE,QAAQ,EAAE,sBAAmB;AAEtC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import '../../internal/InternalCard/index';\nimport '../I18n/index';\nimport { ItemCard } from './ItemCard';\n\ncustomElements.define('foxy-item-card', ItemCard);\n\nexport { ItemCard };\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemCard/index.ts"],"names":[],"mappings":"AAAA,8CAA2C;AAE3C,oCAAiC;AACjC,0BAAuB;AAEvB,OAAO,EAAE,QAAQ,EAAE,sBAAmB;AAEtC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import '../../internal/InternalCard/index';\n\nimport '../NucleonElement/index';\nimport '../I18n/index';\n\nimport { ItemCard } from './ItemCard';\n\ncustomElements.define('foxy-item-card', ItemCard);\n\nexport { ItemCard };\n"]}

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

@@ -1,6 +1,8 @@
 import type { TemplateResult } from 'lit-html';
 import type { Data } from './types';
 import { InternalCard } from '../../internal/InternalCard/InternalCard';
-export declare class ItemCategoryCard extends InternalCard<Data> {
+declare const ItemCategoryCard_base: typeof InternalCard;
+export declare class ItemCategoryCard extends ItemCategoryCard_base<Data> {
     renderBody(): TemplateResult;
 }
+export {};

package/dist/elements/public/ItemCategoryCard/ItemCategoryCard.js

@@ -1,13 +1,14 @@
+import { ResponsiveMixin } from "../../../mixins/responsive.js";
 import { InternalCard } from "../../internal/InternalCard/InternalCard.js";
 import { html } from 'lit-html';
-export class ItemCategoryCard extends InternalCard {
+export class ItemCategoryCard extends ResponsiveMixin(InternalCard) {
     renderBody() {
         const data = this.data;
         return html `
-      <div class="flex justify-between gap-s">
+      <div class="leading-s sm-flex sm-justify-between sm-gap-s">
         <div class="font-semibold truncate flex-shrink-0">${data === null || data === void 0 ? void 0 : data.name}&ZeroWidthSpace;</div>
         ${(data === null || data === void 0 ? void 0 : data.name) !== (data === null || data === void 0 ? void 0 : data.code)
-            ? html `<div class="truncate text-tertiary">${data === null || data === void 0 ? void 0 : data.code}</div>`
+            ? html `<div class="truncate text-tertiary text-s sm-text-m">${data === null || data === void 0 ? void 0 : data.code}</div>`
             : ''}
       </div>
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"ItemCategoryCard.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemCategoryCard/ItemCategoryCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,gBAAiB,SAAQ,YAAkB;IACtD,UAAU;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,OAAO,IAAI,CAAA;;4DAE6C,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI;UAC5D,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,OAAK,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAA;YACzB,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,QAAQ;YAC/D,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\n\nexport class ItemCategoryCard extends InternalCard<Data> {\n  renderBody(): TemplateResult {\n    const data = this.data;\n\n    return html`\n      <div class=\"flex justify-between gap-s\">\n        <div class=\"font-semibold truncate flex-shrink-0\">${data?.name}&ZeroWidthSpace;</div>\n        ${data?.name !== data?.code\n          ? html`<div class=\"truncate text-tertiary\">${data?.code}</div>`\n          : ''}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ItemCategoryCard.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemCategoryCard/ItemCategoryCard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,OAAO,gBAAiB,SAAQ,eAAe,CAAC,YAAY,CAAO;IACvE,UAAU;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,OAAO,IAAI,CAAA;;4DAE6C,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI;UAC5D,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,OAAK,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAA;YACzB,CAAC,CAAC,IAAI,CAAA,wDAAwD,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,QAAQ;YAChF,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { InternalCard } from '../../internal/InternalCard/InternalCard';\nimport { html } from 'lit-html';\n\nexport class ItemCategoryCard extends ResponsiveMixin(InternalCard)<Data> {\n  renderBody(): TemplateResult {\n    const data = this.data;\n\n    return html`\n      <div class=\"leading-s sm-flex sm-justify-between sm-gap-s\">\n        <div class=\"font-semibold truncate flex-shrink-0\">${data?.name}&ZeroWidthSpace;</div>\n        ${data?.name !== data?.code\n          ? html`<div class=\"truncate text-tertiary text-s sm-text-m\">${data?.code}</div>`\n          : ''}\n      </div>\n    `;\n  }\n}\n"]}

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

@@ -52,10 +52,13 @@ export declare class ItemForm extends ItemForm_base<Data> {
     customerAddresses: string | null;
     /** Link to the collection of item categories that can be used with this item. */
     itemCategories: string | null;
+    /** Link to the `fx:locale_codes` property helper for currency formatting. */
+    localeCodes: string | null;
     /** Link to the collection of coupons that can be used with this item. */
     coupons: string | null;
     private __itemsLink;
     renderBody(): TemplateResult;
     protected _sendGet(): Promise<Data>;
+    private get __itemOptionRelatedUrls();
 }
 export {};

package/dist/elements/public/ItemForm/ItemForm.js

@@ -1,5 +1,6 @@
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
 import { html } from 'lit-html';
 /**
  * Form element for creating or editing items (`fx:item`).
@@ -47,6 +48,8 @@ export class ItemForm extends TranslatableMixin(InternalForm, 'item-form') {
         this.customerAddresses = null;
         /** Link to the collection of item categories that can be used with this item. */
         this.itemCategories = null;
+        /** Link to the `fx:locale_codes` property helper for currency formatting. */
+        this.localeCodes = null;
         /** Link to the collection of coupons that can be used with this item. */
         this.coupons = null;
         this.__itemsLink = '';
@@ -56,6 +59,7 @@ export class ItemForm extends TranslatableMixin(InternalForm, 'item-form') {
             ...super.properties,
             customerAddresses: { type: String, attribute: 'customer-addresses' },
             itemCategories: { type: String, attribute: 'item-categories' },
+            localeCodes: { attribute: 'locale-codes' },
             coupons: { type: String },
         };
     }
@@ -69,6 +73,20 @@ export class ItemForm extends TranslatableMixin(InternalForm, 'item-form') {
         ];
     }
     renderBody() {
+        const renderItemOptionCard = ctx => {
+            var _a;
+            return html `
+      <foxy-item-option-card
+        locale-codes=${ifDefined((_a = this.localeCodes) !== null && _a !== void 0 ? _a : void 0)}
+        parent=${ctx.parent}
+        class="p-m"
+        infer=""
+        href=${ctx.href}
+        .related=${ctx.related}
+      >
+      </foxy-item-option-card>
+    `;
+        };
         return html `
       <foxy-internal-text-control infer="name"></foxy-internal-text-control>
 
@@ -114,13 +132,9 @@ export class ItemForm extends TranslatableMixin(InternalForm, 'item-form') {
               infer="item-options"
               first=${this.data._links['fx:item_options'].href}
               limit="5"
-              item="foxy-item-option-card"
               form="foxy-item-option-form"
-              .related=${[
-                this.data._links['fx:transaction'].href,
-                this.data._links['fx:shipment'].href,
-                this.__itemsLink,
-            ]}
+              .item=${renderItemOptionCard}
+              .related=${this.__itemOptionRelatedUrls}
             >
             </foxy-internal-async-details-control>
           `
@@ -130,9 +144,45 @@ export class ItemForm extends TranslatableMixin(InternalForm, 'item-form') {
     }
     async _sendGet() {
         const item = await super._sendGet();
-        const transaction = await super._fetch(item._links['fx:transaction'].href);
-        this.__itemsLink = transaction._links['fx:items'].href;
+        if ('fx:subscription' in item._links) {
+            // TODO: remove the directive below once SDK is updated
+            // @ts-expect-error SDK types are incomplete
+            const subscriptionHref = item._links['fx:subscription'].href;
+            const subscription = await super._fetch(subscriptionHref);
+            const transactionTemplateHref = subscription._links['fx:transaction_template'].href;
+            const transactionTemplate = await super._fetch(transactionTemplateHref);
+            this.__itemsLink = transactionTemplate._links['fx:items'].href;
+            return item;
+        }
+        if ('fx:transaction' in item._links) {
+            const transaction = await super._fetch(item._links['fx:transaction'].href);
+            this.__itemsLink = transaction._links['fx:items'].href;
+            return item;
+        }
+        if ('fx:cart' in item._links) {
+            // TODO: remove the directive below once SDK is updated
+            // @ts-expect-error SDK types are incomplete
+            const cart = await super._fetch(item._links['fx:cart'].href);
+            this.__itemsLink = cart._links['fx:items'].href;
+            return item;
+        }
         return item;
     }
+    get __itemOptionRelatedUrls() {
+        var _a, _b;
+        const links = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links) !== null && _b !== void 0 ? _b : {});
+        const urls = [];
+        if (links['fx:subscription'])
+            urls.push(links['fx:subscription'].href);
+        if (links['fx:transaction'])
+            urls.push(links['fx:transaction'].href);
+        if (links['fx:shipment'])
+            urls.push(links['fx:shipment'].href);
+        if (links['fx:cart'])
+            urls.push(links['fx:cart'].href);
+        if (this.__itemsLink)
+            urls.push(this.__itemsLink);
+        return urls;
+    }
 }
 //# sourceMappingURL=ItemForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ItemForm.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemForm/ItemForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { NucleonV8N } from '../NucleonElement/types';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { html } from 'lit-html';\nimport { Resource } from '@foxy.io/sdk/core';\nimport { Rels } from '@foxy.io/sdk/backend';\n\n/**\n * Form element for creating or editing items (`fx:item`).\n *\n * @slot name:before\n * @slot name:after\n *\n * @slot price:before\n * @slot price:after\n *\n * @slot quantity:before\n * @slot quantity:after\n *\n * @slot subscription:before\n * @slot subscription:after\n *\n * @slot line-item-discount:before\n * @slot line-item-discount:after\n *\n * @slot cart:before\n * @slot cart:after\n *\n * @slot shipping:before\n * @slot shipping:after\n *\n * @slot inventory:before\n * @slot inventory:after\n *\n * @slot timestamps:before\n * @slot timestamps:after\n *\n * @slot delete:before\n * @slot delete:after\n *\n * @slot create:before\n * @slot create:after\n *\n * @element foxy-item-form\n * @since 1.17.0\n */\nexport class ItemForm extends TranslatableMixin(InternalForm, 'item-form')<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      customerAddresses: { type: String, attribute: 'customer-addresses' },\n      itemCategories: { type: String, attribute: 'item-categories' },\n      coupons: { type: String },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ name: v }) => !!v || 'name:v8n_required',\n      ({ name: v }) => (!!v && v.length <= 255) || 'name:v8n_too_long',\n      ({ price: v }) => (typeof v === 'number' && !isNaN(v)) || 'price:v8n_required',\n      ({ price: v }) => (typeof v === 'number' && v >= 0) || 'price:v8n_negative',\n      ({ quantity: v }) => (typeof v === 'number' && v >= 1) || 'quantity:v8n_less_than_one',\n    ];\n  }\n\n  /** Link to the collection of customer addresses that can be used with this item. */\n  customerAddresses: string | null = null;\n\n  /** Link to the collection of item categories that can be used with this item. */\n  itemCategories: string | null = null;\n\n  /** Link to the collection of coupons that can be used with this item. */\n  coupons: string | null = null;\n\n  private __itemsLink = '';\n\n  renderBody(): TemplateResult {\n    return html`\n      <foxy-internal-text-control infer=\"name\"></foxy-internal-text-control>\n\n      <div class=\"grid grid-cols-2 gap-m\">\n        <foxy-internal-number-control infer=\"price\"></foxy-internal-number-control>\n        <foxy-internal-integer-control infer=\"quantity\"></foxy-internal-integer-control>\n      </div>\n\n      <foxy-internal-item-form-subscription-control></foxy-internal-item-form-subscription-control>\n      <foxy-internal-item-form-line-item-discount-control></foxy-internal-item-form-line-item-discount-control>\n      <foxy-internal-item-form-cart-control></foxy-internal-item-form-cart-control>\n      <foxy-internal-item-form-shipping-control></foxy-internal-item-form-shipping-control>\n      <foxy-internal-item-form-inventory-control></foxy-internal-item-form-inventory-control>\n\n      ${this.data\n        ? html`\n            <foxy-internal-async-details-control\n              infer=\"discount-details\"\n              first=${this.data._links['fx:discount_details'].href}\n              limit=\"5\"\n              item=\"foxy-discount-detail-card\"\n            >\n            </foxy-internal-async-details-control>\n\n            <foxy-internal-async-details-control\n              infer=\"coupon-details\"\n              first=${this.data._links['fx:coupon_details'].href}\n              limit=\"5\"\n              item=\"foxy-coupon-detail-card\"\n            >\n            </foxy-internal-async-details-control>\n\n            <foxy-internal-async-details-control\n              infer=\"attributes\"\n              first=${this.data._links['fx:attributes'].href}\n              limit=\"5\"\n              item=\"foxy-attribute-card\"\n              form=\"foxy-attribute-form\"\n            >\n            </foxy-internal-async-details-control>\n\n            <foxy-internal-async-details-control\n              infer=\"item-options\"\n              first=${this.data._links['fx:item_options'].href}\n              limit=\"5\"\n              item=\"foxy-item-option-card\"\n              form=\"foxy-item-option-form\"\n              .related=${[\n                this.data._links['fx:transaction'].href,\n                this.data._links['fx:shipment'].href,\n                this.__itemsLink,\n              ]}\n            >\n            </foxy-internal-async-details-control>\n          `\n        : ''}\n      ${super.renderBody()}\n    `;\n  }\n\n  protected async _sendGet(): Promise<Data> {\n    type Transaction = Resource<Rels.Transaction>;\n\n    const item = await super._sendGet();\n    const transaction = await super._fetch<Transaction>(item._links['fx:transaction'].href);\n\n    this.__itemsLink = transaction._links['fx:items'].href;\n\n    return item;\n  }\n}\n"]}
+{"version":3,"file":"ItemForm.js","sourceRoot":"","sources":["../../../../src/elements/public/ItemForm/ItemForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\nimport type { ItemRenderer } from '../CollectionPage/types';\nimport type { NucleonV8N } from '../NucleonElement/types';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\n/**\n * Form element for creating or editing items (`fx:item`).\n *\n * @slot name:before\n * @slot name:after\n *\n * @slot price:before\n * @slot price:after\n *\n * @slot quantity:before\n * @slot quantity:after\n *\n * @slot subscription:before\n * @slot subscription:after\n *\n * @slot line-item-discount:before\n * @slot line-item-discount:after\n *\n * @slot cart:before\n * @slot cart:after\n *\n * @slot shipping:before\n * @slot shipping:after\n *\n * @slot inventory:before\n * @slot inventory:after\n *\n * @slot timestamps:before\n * @slot timestamps:after\n *\n * @slot delete:before\n * @slot delete:after\n *\n * @slot create:before\n * @slot create:after\n *\n * @element foxy-item-form\n * @since 1.17.0\n */\nexport class ItemForm extends TranslatableMixin(InternalForm, 'item-form')<Data> {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      customerAddresses: { type: String, attribute: 'customer-addresses' },\n      itemCategories: { type: String, attribute: 'item-categories' },\n      localeCodes: { attribute: 'locale-codes' },\n      coupons: { type: String },\n    };\n  }\n\n  static get v8n(): NucleonV8N<Data> {\n    return [\n      ({ name: v }) => !!v || 'name:v8n_required',\n      ({ name: v }) => (!!v && v.length <= 255) || 'name:v8n_too_long',\n      ({ price: v }) => (typeof v === 'number' && !isNaN(v)) || 'price:v8n_required',\n      ({ price: v }) => (typeof v === 'number' && v >= 0) || 'price:v8n_negative',\n      ({ quantity: v }) => (typeof v === 'number' && v >= 1) || 'quantity:v8n_less_than_one',\n    ];\n  }\n\n  /** Link to the collection of customer addresses that can be used with this item. */\n  customerAddresses: string | null = null;\n\n  /** Link to the collection of item categories that can be used with this item. */\n  itemCategories: string | null = null;\n\n  /** Link to the `fx:locale_codes` property helper for currency formatting. */\n  localeCodes: string | null = null;\n\n  /** Link to the collection of coupons that can be used with this item. */\n  coupons: string | null = null;\n\n  private __itemsLink = '';\n\n  renderBody(): TemplateResult {\n    const renderItemOptionCard: ItemRenderer = ctx => html`\n      <foxy-item-option-card\n        locale-codes=${ifDefined(this.localeCodes ?? void 0)}\n        parent=${ctx.parent}\n        class=\"p-m\"\n        infer=\"\"\n        href=${ctx.href}\n        .related=${ctx.related}\n      >\n      </foxy-item-option-card>\n    `;\n\n    return html`\n      <foxy-internal-text-control infer=\"name\"></foxy-internal-text-control>\n\n      <div class=\"grid grid-cols-2 gap-m\">\n        <foxy-internal-number-control infer=\"price\"></foxy-internal-number-control>\n        <foxy-internal-integer-control infer=\"quantity\"></foxy-internal-integer-control>\n      </div>\n\n      <foxy-internal-item-form-subscription-control></foxy-internal-item-form-subscription-control>\n      <foxy-internal-item-form-line-item-discount-control></foxy-internal-item-form-line-item-discount-control>\n      <foxy-internal-item-form-cart-control></foxy-internal-item-form-cart-control>\n      <foxy-internal-item-form-shipping-control></foxy-internal-item-form-shipping-control>\n      <foxy-internal-item-form-inventory-control></foxy-internal-item-form-inventory-control>\n\n      ${this.data\n        ? html`\n            <foxy-internal-async-details-control\n              infer=\"discount-details\"\n              first=${this.data._links['fx:discount_details'].href}\n              limit=\"5\"\n              item=\"foxy-discount-detail-card\"\n            >\n            </foxy-internal-async-details-control>\n\n            <foxy-internal-async-details-control\n              infer=\"coupon-details\"\n              first=${this.data._links['fx:coupon_details'].href}\n              limit=\"5\"\n              item=\"foxy-coupon-detail-card\"\n            >\n            </foxy-internal-async-details-control>\n\n            <foxy-internal-async-details-control\n              infer=\"attributes\"\n              first=${this.data._links['fx:attributes'].href}\n              limit=\"5\"\n              item=\"foxy-attribute-card\"\n              form=\"foxy-attribute-form\"\n            >\n            </foxy-internal-async-details-control>\n\n            <foxy-internal-async-details-control\n              infer=\"item-options\"\n              first=${this.data._links['fx:item_options'].href}\n              limit=\"5\"\n              form=\"foxy-item-option-form\"\n              .item=${renderItemOptionCard}\n              .related=${this.__itemOptionRelatedUrls}\n            >\n            </foxy-internal-async-details-control>\n          `\n        : ''}\n      ${super.renderBody()}\n    `;\n  }\n\n  protected async _sendGet(): Promise<Data> {\n    type TransactionTemplate = Resource<Rels.TransactionTemplate>;\n    type Subscription = Resource<Rels.Subscription>;\n    type Transaction = Resource<Rels.Transaction>;\n    type Cart = Resource<Rels.Cart>;\n\n    const item = await super._sendGet();\n\n    if ('fx:subscription' in item._links) {\n      // TODO: remove the directive below once SDK is updated\n      // @ts-expect-error SDK types are incomplete\n      const subscriptionHref = item._links['fx:subscription'].href;\n      const subscription = await super._fetch<Subscription>(subscriptionHref);\n\n      const transactionTemplateHref = subscription._links['fx:transaction_template'].href;\n      const transactionTemplate = await super._fetch<TransactionTemplate>(transactionTemplateHref);\n\n      this.__itemsLink = transactionTemplate._links['fx:items'].href;\n      return item;\n    }\n\n    if ('fx:transaction' in item._links) {\n      const transaction = await super._fetch<Transaction>(item._links['fx:transaction'].href);\n      this.__itemsLink = transaction._links['fx:items'].href;\n      return item;\n    }\n\n    if ('fx:cart' in item._links) {\n      // TODO: remove the directive below once SDK is updated\n      // @ts-expect-error SDK types are incomplete\n      const cart = await super._fetch<Cart>(item._links['fx:cart'].href);\n      this.__itemsLink = cart._links['fx:items'].href;\n      return item;\n    }\n\n    return item;\n  }\n\n  private get __itemOptionRelatedUrls() {\n    const links = (this.data?._links ?? {}) as Record<string, { href: string }>;\n    const urls: string[] = [];\n\n    if (links['fx:subscription']) urls.push(links['fx:subscription'].href);\n    if (links['fx:transaction']) urls.push(links['fx:transaction'].href);\n    if (links['fx:shipment']) urls.push(links['fx:shipment'].href);\n    if (links['fx:cart']) urls.push(links['fx:cart'].href);\n    if (this.__itemsLink) urls.push(this.__itemsLink);\n\n    return urls;\n  }\n}\n"]}